使用DOM和事件委派target 实现表格的动态添加和删除

html代码：

    <input type="text" id="age" placeholder="请输入年龄">
    <input type="text" id="sex" placeholder="请输入性别">
    <button id="btn">添加</button>
    <table>
        <thead>
            <tr>
                <td>姓名</td>
                <td>年龄</td>
                <td>性别</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>

css代码：

<style>
     table {
         width: 800px;
         height: 600px;
         border-collapse: collapse;
         text-align: center;
         margin: 100px auto;
     }

     td {
         border: 1px solid #000;
     }
 </style>

JavaScript代码：

<script src="./js/utils.js"></script>
 <script>
     var arr = [
         {
             name: "传奇",
             age: 20,
             sex: "男"
         },
         {
             name: "传奇",
             age: 20,
             sex: "男"
         },
         {
             name: "传奇",
             age: 20,
             sex: "男"
         }
     ]

     var tbody = document.querySelector("tbody")

     function createfn() {
         tbody.innerHTML = ""
         arr.forEach(function (item, index) {
             var tr = document.createElement("tr")
             for (var key in item) {
                 var td = document.createElement("td")
                 td.innerText = item[key]
                 tr.appendChild(td)
             }

             tr.innerHTML += "<td class='del' index='" + index + "'>删除</td>"

             tbody.appendChild(tr)
         })

     }
     createfn()

     on(tbody, "click", function (e) {
         if (e.target.nodeName === "TD" && e.target.className === "del") {
             var res = e.target.getAttribute("index")
             arr.splice(res, 1)
             // e.target.get
             createfn()
         }
     })

     on(my$("btn"), "click", function () {
         var obj = {
             name: (my$("xing").value),
             age: (my$("age").value),
             sex: (my$("sex").value)
         }

         arr.push(obj)
         createfn()
     })
 </script>

以下是封装的JavaScript utils里所用方法

//这个是获取DOM元素的id 装入函数my$里
function my$(id) {
    return document.getElementById(id)
}

 添加事件监听
    @param ele  DOM元素
    @param type  事件类型
    @param  callback  回调函数 事件处理函数
*/

//主要是浏览器事件监听兼容问题
addEventListener  ==>是ie8以上和非ie使用的事件监听方式
attachEvent  ==>是ie8及以下浏览器事件监听方法
function on(ele, type, callback) {
    if (ele.addEventListener) {
        if (type.indexOf("on") === 0) {
            type = type.slice(2)
        }
        ele.addEventListener(type, callback)
    } else {
        if (type.indexOf("on") !== 0) {
            type = "on" + type
        }
        ele.attachEvent(type, callback)
    }
} 

以下为实现效果：

添加效果：

删除效果：