纯原生js实现table表格的增删(2)

function reSequence() { var vObj = vTbody.getElementsByClassName == null?document.getElementsByClassName('seq', vTbody):vTbody.getElementsByClassName('seq'); for (var i=0, len=vObj.length; i<len; i++) { vObj[i].innerHTML = i+1; } }

除了排序外，还需其他操作，所以我们创建一个init()方法，集中管理reSequence()这些方法，在createTr()方法的结尾调用init()方法。

清空行方法clearTrs()

移除/销毁某个dom对象，首先想到的是remove()方法，不幸的是，存在IE浏览器兼容问题，因此，采用了一个更简便的方式，对dom对象执行innerHTML=""，代码如下

function clearTrs() { vTbody.innerHTML = ''; }

IE8报错，'未知的运行错误'。查了以下，因为ie8的table.innerHTML是只读属性，妹的！再改：

function clearTrs() { while(vTbody.rows.length >0) { vTbody.deleteRow(); } }

删除行方法addBtnDelsListener()

接下来，给DELETE按钮绑定删除当前行的方法。

为了解决兼容性问题，网上给出的方法是针对不同浏览器（IE、非IE）分别使用addEventListener、attachEvent方法，

我采用的是另一种解决方案：

obj.onclick = function(){};

匿名函数的方法体，吸取了上面clearTrs()方法的经验教训，直接采用deleteRow(index)方法。

有一点需要注意thisTr.rowIndex获取的行数，比当前行要大2，因为thead中还有两行。所以当前的索引数=thisTr.rowIndex-vThead.rows.length

代码如下:

function addBtnDelsListener() { var vBtnDels = vTbody.getElementsByClassName == null?document.getElementsByClassName('td-inp-btn-del', vTbody):vTbody.getElementsByClassName('td-inp-btn-del'); for (var i=0, len=vBtnDels.length; i<len; i++) { vBtnDels[i].onclick = function() { var vTr = this.parentElement.parentElement; vTbody.deleteRow(vTr.rowIndex-vTbody.parentNode.getElementsByTagName('thead')[0].rows.length); reSequence(); }; } }

执行完删除操作后，通过reSequence()方法重新排序。

同时将addBtnDelsListener()方法加入到init()方法中。

复制行方法addBtnCpsListener()

再来看一下COPY按钮，添加事件监听的方式同上。

如果innerHTML不是只读的话，可以createElement一个tr元素 然后newTr.innerHTML=thisTr.innerHTML，

为了兼容性，必须做些改变。

其实可以将复制看做是新建，唯一的不同在于新建行的文本输入框的内容要等同于被复制行。

这就简单了。我可以先调用createTr()方法，再将最后一个元素lastChild中的文本框的value等于被复制行。

思路有了，代码如下：

function addBtnCpsListener() { var vBtnCps = vTbody.getElementsByClassName == null?document.getElementsByClassName('td-inp-btn-cp', vTbody):vTbody.getElementsByClassName('td-inp-btn-cp'); for (var i=0, len=vBtnCps.length; i<len; i++) { vBtnCps[i].onclick = function() { createTr(); var vNewTr = vTbody.lastChild; var vTr = this.parentElement.parentElement; vNewTr.getElementsByClassName == null?document.getElementsByClassName('td-inp-txt', vNewTr)[0].value = document.getElementsByClassName('td-inp-txt', vTr)[0].value:vNewTr.getElementsByClassName('td-inp-txt')[0].value = vTr.getElementsByClassName('td-inp-txt')[0].value; } } }

优化修改

进行一些优化修改工作：

var elements = new Array();

修改为：var elements = [];

原因：数组用[]更好

将addBtnDelsListener方法中的vBtnDels[i].onclick = function() {

修改为：vBtnDels[i].onclick = delTr;

外部新创建一个函数

function delTr() { var vTr = this.parentElement.parentElement; vTbody.deleteRow(vTr.rowIndex-vTbody.parentNode.getElementsByTagName('thead')[0].rows.length); reSequence(); }

原因：Don't make functions within a loop.

同理，将addBtnCpsListener中的vBtnCps[i].onclick = function() {

修改为：vBtnCps[i].onclick = copyTr;

外部新创建一个函数