zoukankan      html  css  js  c++  java
  • 表格添加内容并进行删除案例

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

  • 相关阅读:
    vue scrollTop的使用方法
    常见简体繁体转换
    远程桌面发生身份验证错误,要求的函数不受支持
    发布版找不到字体,控制台会报错问题处理
    sql进阶-自增字段的数据修改
    sql序列(6)游标
    sql序列(1)新建文件夹、建库
    sql进阶-触发器的实现
    sql进阶-@@rowcount详解
    单条数据横向滚动
  • 原文地址:https://www.cnblogs.com/web001/p/8463585.html
Copyright © 2011-2022 走看看