码迷,mamicode.com
首页 > Web开发 > 详细

JS 动态表格(添加、删除行)

时间:2019-09-02 19:08:59      阅读:243      评论:0      收藏:0      [点我收藏+]

标签:auto   触发事件   move   nbsp   lap   操作   隐藏   title   ext   

用JS实现表格的增删功能,添加或删除一列:

实现结果如下图:

1)添加行;

技术图片

 

 2)删除行;

技术图片

 

 

实现代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格</title>
    <style>
        a{
            text-decoration: none;
        }
        .one{
            margin: 0 auto;
            width: 1000px;
        }
        .btns {
            margin-bottom: 5px;
        }
        .btn {
            display: inline-block;
            padding: .3em 1.2em;
            border-radius: 3px;
            background-color: teal;
            color: #fff;
            cursor :pointer;
        }
        table.table {
            box-sizing: border-box;
            width: 100%;
            border-collapse: collapse;
        }
        table.table td ,
        table.table th {
            border: 1px solid #ccc;
            line-height: 2em;
            text-align: center;
        }
        .none {
            display: none;
        }
    </style>
</head>
<body>
    <div class="one">
        <div class="btns">
            <div class="btn" id="btn_add">添加</div>
            <div class="btn">批量导入</div>
            <div class="btn">批量删除</div>
        </div>
        <table class="table">
            <thead>
                <tr>
                    <th width="80px">编号</th>
                    <th width="100px">班级</th>
                    <th width="220px">姓名</th>
                    <th width="80px">性别</th>
                    <th width="80px">年龄</th>
                    <th>邮箱</th>
                    <th>手机</th>
                    <th width="100px">操作</th>
                </tr>
            </thead>
            <tbody>
                <tr class="none" >
                    <td><input type="checkbox"></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td>
                        <a class="btn_del" href="javascript:void(0)">删除</a>
                        <a class="btn_upd" href="javascript:void(0)">修改</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
<script> //获取Id为btn_add的元素,并将其赋值给btn_add var btn_add = document.getElementById("btn_add"); //获取标签名字为tbody的第一个标签,并将其赋值给tbody var tbody = document.getElementsByTagName("tbody")[0]; // 为删除按钮绑定事件处理函数 tbody.onclick = function(event){ //新建触发事件=触发事件的Dom元素本身(触发事件即点击事件) var target = event.target; //如果触发事件的节点名字===a(如果点击a标签) if(target.nodeName === "A"){ //如果触发事件的class名字===btn_del(如果点击class名字===btn_del的a标签) if(target.className === "btn_del"){ //移除tody下的孩子(删除点击事件的父节点的父节点,即删除点击的a标签的父节点(td标签)的父节点(tr标签) tbody.removeChild(target.parentNode.parentNode) } //如果触发事件的class名字===btn_upd(如果点击class名字===btn_upd的a标签) if(target.className === "btn_upd"){ alert("修改"); } } } // 为添加按钮绑定事件处理函数 btn_add.onclick = function(event){ // 产生一个tr,新添加行等于复制隐藏行 var newTr = tbody.firstElementChild.cloneNode(true); //新添加行的第2+1列的值为0-1之间的随机小数 newTr.children[2].innerHTML = "<strong>"+Math.random()+"</strong>"; //新添加行的class名字为0-1之间的随机小数 newTr.className = Math.random(); // 将一个tr追加到tbody tbody.appendChild(newTr); }; </script> </body> </html>

 

JS 动态表格(添加、删除行)

标签:auto   触发事件   move   nbsp   lap   操作   隐藏   title   ext   

原文地址:https://www.cnblogs.com/lidyfamily/p/11448103.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!