跟着廖雪峰的 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