用JS制作表格的添加删除

程序设计之道无远弗届，御晨风而返。———— 杰佛瑞 · 詹姆士

目的就是锻炼操作DOM。先写一下html的布局。

姓名：<input type="text"> 年龄：<input type="text"> 性别：<input type="text"> <input type="button" value="添加">
<table></table>

创建几个基本信息，然后开始添加JS。

    var aInput = document.getElementsByTagName('input');           //获取页面上的Input
    var len = aInput.length;                                       //给初始的input定义固定数量，不然下面循环会乱
    var oTable = document.getElementsByTagName('table')[0];        //读取页面的表格,[0]是因为getElementsByTagName获取的是以数组形式展现
    aInput[aInput.length-1].onclick = function(){                 //提交的点击事件
        var oTr = document.createElement('tr');                     //创建一个tr节点
        for(var i=0; i<len-1;i++){                                 //开始读取input的value，-1的目的就是去掉后面的添加按钮
            var oTd = document.createElement('td');                 //创建一个td节点
            oTd.innerHTML = aInput[i].value;
            oTr.appendChild(oTd);                                   //给tr子元素末端添加一个td
        }
        var oBtn = document.createElement('input');                 //这里是在每个tr后面添加一个删除按钮，用来删除这个tr
        oBtn.type = 'button';
        oBtn.value = '删除';
        oBtn.className = 'delBtn';
        oTr.appendChild(oBtn);
        oTable.appendChild(oTr);                                    //将这个tr添加到表格中

        var oDelBtn = document.getElementsByClassName('delBtn');    //提取tr里的删除
        for(var i=0; i<oDelBtn.length; i++) {                       //使每个tr里的删除按钮都循环到
            oDelBtn[i].onclick = function () {                      //给每个tr的删除的按钮添加点击事件
                oTable.removeChild(this.parentNode);                //删除按钮的父级这里指删除tr
            }
        }
    }

到这里一个简单的添加删除功能就实现了，当然这不是最好的办法，因为创建一个tr都要循环一次不利于页面优化，这里可以利用事件的冒泡性质来完成这部分功能，这里仅是一个小demo。（ps:后续会分析一下事件委托）

---