表格添加内容并进行删除案例 - 麦兜家园

表格都很常见，一般都是用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绑定事件经常会用到，可以委托绑定（写选择器就是委托事件），否则就是自己绑定注册事件。

posted on 2018-02-23 21:44 麦兜家园阅读(259) 评论(0) 收藏举报

刷新页面返回顶部