JavaScript动态添加/删除表格行

跟着廖雪峰的 JS教程 初步学习了一下JavaScript，看到 DOM操作 部分的时候，想着找个小例子实践，恰好项目页面对表格的操作较多，需要解决简单的 table行动态增删 的问题。
于是在此回顾记录一下如何使用原生JavaScript来解决该问题。

---

以项目页面中一个简单的表格为例：

如果想要通过点击左下角+按钮达到增加一行的效果：

应该怎样处理呢？

基本思路就是点击一下按钮触发click事件，将添加表格行的函数绑定到该事件即可，具体来看添加表格行的函数：

对table进行操作之前，需要先拿到table body的DOM节点，这里可以采用两种方法，通过id直接定位：document.getElementById()，或者使用document.querySelector()，具体用法请参考 廖雪峰的教程；

然后，增加新的一行相当于在原有的DOM树上增加一个<tr>节点，需要先创建一个<tr>节点再添加到<tbody>节点的末尾，创建一个新节点用到的方法是document.creatElement()，插入则可以用appendChild()方法，如果要插入到指定位置，可以使用insertBefore()等；

由于表格的每一行都由若干个单元格组成，所以对于新建的<tr>节点，应该为它添加上若干个<td>节点；

此外，对于每个<td>节点来说，还可以设定它的HTML属性，可使用element.setAttribute()方法，该方法有两个参数，第一个是属性名，第二个是对应的value值，如果要设置class属性，则需要使用element.classList.add()或者element.classList.remove()。

由于删除表格行的按钮应该是在添加了新行之后才有的，所以直接在生成的按钮上添加一个点击事件的监听即可：

delBtn.addEventListener('click', function(){
    tb.removeChild(tr);
});

以上都可以参考MDN上的相关介绍 DOM接口，也可以看看W3School上的 教程 。

完整的代码如下：

$("button#addBtn").click(function(){
    var submitBtn = document.getElementById('submitBtn');
    submitBtn.classList.remove('hidden');
    var tb = document.querySelector('#simpleTable > tbody');
    var tr = document.createElement('tr');
    var tdInfo = document.createElement('td');
    var inputInfo = document.createElement('input');
    inputInfo.setAttribute('type', 'text');
    inputInfo.setAttribute('name', 'details');
    inputInfo.setAttribute('placeholder', '项目信息');
    inputInfo.setAttribute('required', 'required');
    inputInfo.classList.add('col-xs-12');
    tdInfo.appendChild(inputInfo);

    var tdAmount = document.createElement('td');
    var inputAmount = document.createElement('input');
    inputAmount.setAttribute('type', 'text');
    inputAmount.setAttribute('name', 'amounts');
    inputAmount.setAttribute('placeholder', '项目金额');
    inputAmount.setAttribute('required', 'required');
    inputAmount.classList.add('col-xs-12');
    tdAmount.appendChild(inputAmount);

    var tdOp = document.createElement('td');
    var delBtn = document.createElement('button');
    delBtn.setAttribute('type', 'button');
    delBtn.setAttribute('title', '删除');
    delBtn.classList.add('btn');
    delBtn.classList.add('btn-xs');
    delBtn.classList.add('btn-danger');
    delBtn.innerHTML = '<i class="ace-icon fa fa-trash-o"></i>';
    delBtn.addEventListener('click', function(){
        tb.removeChild(tr);
    });
    tdOp.appendChild(delBtn);

    tr.appendChild(tdInfo);
    tr.appendChild(tdAmount);
    tr.appendChild(tdOp);

    tb.appendChild(tr);     
});

---

最后安利一下我们小组做的AA收款项目的小网站 LETS GO DUTCH
github地址：https://github.com/wuwujun/lets-go-dutch