您的位置：首页 > 其它

实现表格隔行变色且动态增加和删除

2018-03-12 10:34 621 查看
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态操作表格</title>
    
    <style>
        #data {
            width: 600px;
        }

        #data, td, th {
            border-collapse: collapse;
            border: 1px solid #aaaaaa;
        }

        th, td {
            height: 28px;
        }

        #data thead {
            background-color: #333399;
            color: #ffffff;
        }

        .blue {
            background-color: #ccccff;
        }
    </style>
    <script src="jquery-3.2.1.min.js"></script>
    <script>
   $(function(){
       $("#add").click(function(){
        ////添加元素
            var appEle="<tr><td>Allen</td><td>$3700</td><td>2011-12-05</td><td><a href='#'>删除</a></td></tr>";
            // target.append(appEle)
            // appEle.appendTo(target)
            $("#data>tbody").append(appEle);
            $("#data>tbody>tr a").click(removeEle);
            $("#data>tbody>tr:even").css("background","pink");

       });
       //删除元素
       $("#data>tbody>tr a").click(removeEle);
       function removeEle(){
         var target=$(this).parent().parent();
            target.remove();
        $("#data>tbody>tr:even").css("background","pink");
         $("#data>tbody>tr:odd").css("background","");
       }
       $("#data>tbody>tr:even").css("background","pink");
   })
    </script>
</head>
<body>
    <input type="button" id="add" value="新增">
    <table id="data">
        <thead>
        <tr>
            <th>姓名</th>
            <th>工资</th>
            <th>入职时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>Tom</td>
            <td>$3500</td>
            <td>2010-10-25</td>
            <td><a href="#">删除</a></td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>$3400</td>
            <td>2010-12-1</td>
            <td><a href="#">删除</a></td>
        </tr>
        <tr>
            <td>King</td>
            <td>$5900</td>
            <td>2009-08-17</td>
            <td><a href="#">删除</a></td>
        </tr>
        <tr>
            <td>Scott</td>
            <td>$3800</td>
            <td>2012-11-17</td>
            <td><a href="#">删除</a></td>
        </tr>
        <tr>
            <td>Smith</td>
            <td>$3100</td>
            <td>2014-01-27</td>
            <td><a href="#">删除</a></td>
        </tr>
        <tr>
            <td>Allen</td>
            <td>$3700</td>
            <td>2011-12-05</td>
            <td><a href="#">删除</a></td>
        </tr>
        </tbody>
    </table>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航