JavaScript动态添加/删除表格行

刺骨的言语ヽ痛彻心扉 2022-07-13 00:25 320阅读 0赞

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

--------------------

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

![表格][SouthEast]

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

![表格增行][SouthEast 1]

应该怎样处理呢？

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

> 对table进行操作之前，需要先拿到table body的DOM节点，这里可以采用两种方法，通过id直接定位：`document.getElementById()`，或者使用`document.querySelector()`，具体用法请参考 [廖雪峰的教程][Link 1]；
> 
> 然后，增加新的一行相当于在原有的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接口][DOM]，也可以看看W3School上的 [教程][Link 2] 。

完整的代码如下：

$("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][https_github.com_wuwujun_lets-go-dutch]

[JS]: http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000
[SouthEast]: /images/20220713/0e72c460e3144fbea35fb73d8bbef5de.png
[SouthEast 1]: /images/20220713/62f58308ced141fca77fc1744d25caeb.png
[Link 1]: http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/001434499851683f7f8d6b7717343248a75d5e7f930def4000
[DOM]: https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object_Model
[Link 2]: http://www.w3school.com.cn/jsref/dom_obj_all.asp
[LETS GO DUTCH]: http://www.aapay.site/
[https_github.com_wuwujun_lets-go-dutch]: https://github.com/wuwujun/lets-go-dutch