公司实习生问我table的增删操作，用jQuery很简单的实现了。又问我不使用jQuery，只使用js如何实现。
面对这种情况，我的一贯做法是‘不理解，但是支持'。
jQuery用的多了，人也懒了，但还是用js实现了这一操作，觉得难点在于IE兼容。。。
只是想找代码看看的可以跳过分析过程，文章底部附有完整代码。
以下是coding过程：
HTML结构代码
一个基本的table结构，增加了一些简单的样式，三个按钮分别对应创建、清空，和一个预留。
<!DOCTYPE HTML> <html> <head> <title>table</title> <meta charset='utf-8' /> <style type="text/css"> table.base{ border-collapse:collapse; text-align: center; border: 1px solid black; } table, tr, td, th{ border: 1px solid black; } </style> </head> <body> <div> <table> <thead> <tr> <th colspan="3">This is a table for operations by javascript</th> </tr> <tr> <th> <input type="button" value="CREATE" /> </th> <th> <input type="button" value="CLEAR" /> </th> <th> <input type="button" value="GUESS"/> </th> </tr> </thead> <tbody> </tbody> </table> </div> </body> </html>
构造函数（伪构造函数）
考虑过，创建一个隐藏的tr，基于此tr执行创建操作。为了不破坏HTML整体结构，决定通过js生成tr对象并append到页面中。
为了在页面加载完成后，再执行dom操作，所以将<script>放在代码下端</body>之前。
基于table中的tbody进行增删操作，可以先声明此全局变量
var vTbody = document.getElementById('main-table').getElementsByTagName('tbody')[0];
创建对象，可以使用document.createElement方法。
以面向对象的方式进行编程，先写构造函数（其实并不是标准的构造函数格式），从最内部的元素开始。
td中可能会有text和button等表单元素，所以先创建一个 input 的构造函数function myInput(vId, vClass, vType, vValue, vParent){}
这里有一个兼容性问题，就是IE内核不支持setAttribute(class, value)，需要使用setAttribute(className, value)，所以为了解决兼容问题，可以通过
setAttribute(class, value) for FF、Chrome..
setAttribute(className, value) for IE
这里采用的是另一种方式 .className，代码如下：
function myInput(vId, vClass, vType, vValue, vParent) { var vInput = document.createElement('input'); if(vId) { vInput.setAttribute('id', vId); } vInput.setAttribute('type', vType); vInput.setAttribute('value', vValue); vInput.className = vClass; if(vParent) { vParent.appendChild(vInput); } }
然后是td对象和tr对象的构造函数，大同小异，代码如下
function myTd(vId, vClass, vChild, vParent) { var vTd = document.createElement('td'); if(vId){ vTd.setAttribute('id', vId); } vTd.className = vClass; if(vChild) { vTd.appendChild(vChild); } if(vParent) { vParent.appendChild(vTd); } return vTd; } function myTr(vId, vClass, vChild, vParent) { var vTr = document.createElement('tr'); if(vId){ vTr.setAttribute('id', vId); } vTr.className = vClass; if(vChild) { vTr.appendChild(vChild); } if(vParent) { vParent.appendChild(vTr); } return vTr; }
新建行方法createTr()
构造函数完成之后，完善createTr()方法。
预想的tr结构为 序号，文本框，操作按钮。
依次创建相关对象。序号列需要动态刷新，所以先设定class名称，通过方法执行排序操作。
function createTr() { var vTr = new myTr(null, null, null, vTbody); //序列td var vTdSeq = new myTd(null, 'seq', null, vTr); //文本框td var vTdText = new myTd(null, null, null, vTr); var vInputText = new myInput(null, 'td-inp-txt', 'text', '', vTdText); //操作按钮td var vTdBtn = new myTd(null, null, null, vTr); var vInputBtnCp = new myInput(null, 'td-inp-btn-cp', 'button', 'COPY', vTdBtn); var vInputBtnDel = new myInput(null, 'td-inp-btn-del', 'button', 'DELETE', vTdBtn); }
排序方法reSequence()
创建一个动态排序方法reSequence() ，有一个兼容性问题 innerText在火狐下无效果，所以使用innerHTML。代码如下
function reSequence() { var vObj = vTbody.getElementsByClassName('seq'); for (var i=0, len=vObj.length; i<len; i++) { vObj[i].innerHTML = i+1; } }
有一个兼容性问题,IE8及以下不支持getElementsByClassName()方法，网上找到了解决方案
if(!document.getElementsByClassName){ document.getElementsByClassName = function(className, element){ var children = (element || document).getElementsByTagName('*'); var elements = new Array(); for (var i=0; i<children.length; i++){ var child = children[i]; var classNames = child.className.split(' '); for (var j=0; j<classNames.length; j++){ if (classNames[j] == className){ elements.push(child); break; } } } return elements; }; }
试图在Object或者是HTMLTableSectionElement的原型上增加此方法，如
HTMLTableSectionElement.prototype.getElementsByClassName = function(){}
可惜没有实现。
修改后的代码为