表格添加内容并进行删除案例

Posted 麦兜家园

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了表格添加内容并进行删除案例相关的知识,希望对你有一定的参考价值。

表格都很常见,一般都是用table来写的,今天我就写一个dl和dd布局的表格,并往表格里添加内容,同时点击删除按钮也可以删掉表格内容。来看代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{ margin:0; padding:0;}
    dl{list-style: none;}
    .box{ width:400px; height:40px; margin:0 auto;}
    .box dl{ list-style:none;overflow: hidden;border:1px solid #e5e5e5;}
    .box dl dt{background: #ff7e7e;font-size:16px;color:#fff;}
    .box dl dt,.box dl dd{border-bottom:1px solid #e5e5e5;}
    .box dl dd:last-child{border:none;}
    .box dl dd a{background:#1E9FFF;color:#fff;padding:5px 10px;font-size: 12px;margin-left:20px;text-decoration: none;}
    input{margin:10px 20px 10px 0;padding:5px 10px;border:none;outline:0;background:#1E9FFF;color:#fff;}
    span{padding:10px 20px;display:inline-block;width:60px;text-align: center}
</style>
<body>
<div class="box">
    <input id="btnClear" type="button" value="清空内容"/>
    <input id="btnAdd" type="button" value="添加"/>
    <dl>
        <dt>
            <span>标题</span>
            <span>标题1</span>
            <span>标题2</span>
        </dt>
        <dd>
            <span>内容</span>
            <span>内容</span>
            <span>内容</span>
            <a class="btndelte" href="javascript:void(0)">删除</a>
        </dd>
        <dd>
            <span>内容</span>
            <span>内容</span>
            <span>内容</span>
            <a class="btndelte" href="javascript:void(0)">删除</a>
        </dd>
        <dd>
            <span>内容</span>
            <span>内容</span>
            <span>内容</span>
            <a class="btndelte" href="javascript:void(0)">删除</a>
        </dd>
        <dd>
            <span>内容</span>
            <span>内容</span>
            <span>内容</span>
            <a class="btndelte" href="javascript:void(0)">删除</a>
        </dd>
    </dl>
</div>
<script src="js/jquery-1.11.3.min.js"></script>
<script>
    $(function(){
        $("#btnClear").on("click",function(){
            $("dl dd").empty();
        });
        $("#btnAdd").on("click",function(){
            $(<dd> <span>内容1</span> <span>内容1</span> <span>内容1</span> <a class="btndelte" href="javascript:void(0)">删除</a> </dd>).appendTo("dl")})
        $("dl").on("click",".btndelte",function(){
            console.log($(this).parent());
            $(this).parent().empty();
        })
    })
</script>

</body>
</html>

这个案例主要用到的就是on绑定事件,以及appendTo事件。on绑定事件经常会用到,可以委托绑定(写选择器就是委托事件),否则就是自己绑定注册事件。

以上是关于表格添加内容并进行删除案例的主要内容,如果未能解决你的问题,请参考以下文章

画画一样开发软件 申请审批管理系统开发案例3.1

JS表格小案例

学生信息管理案例

片段内的表格布局

长按删除列表项(在主从中使用片段)

ATP应用测试平台——关于网页表格的打印及PDF下载的实战案例