为接下来要做一个动态输入的表格积累的资料，非常不错，下面分享给大家，供大家参考，如果有更好的插件和封装的东西，共享下哈。。
关键代码如下：
<script type="text/javascript">var currentActiveRow; //选中的颜色var customTable = function() { };customTable.prototype = {init: {ajaxUrl: "",tId: "tbody",delMsg: "确认要删除吗?"},ajax: function(params, callback) {var that = this;$.ajax({type: "get",cache: false,dataType: "json",url: that.init.ajaxUrl,data: params,success: arguments[1] || function() { },error: arguments[2] || function() {if (window.console) {console.log("error log: " + data.responseText);}}});},initData: function() {var that = this;var params = {ajaxMethod: "getbookbag",random: Math.random()};var suc = function(data) {if (data.isSuccess === 1) {} else {}};var err = function() {};ttable.ajax(params, suc, err);},addRow: function() {var tbody = document.getElementById(this.init.tId);var rowNo = tbody.rows.length;tbody.insertRow(rowNo);tbody.rows[rowNo].insertCell(0);tbody.rows[rowNo].cells[0].appendChild(document.createTextNode(rowNo + 1)); //innerText = "0001";//innerText 和innerHTMLtbody.rows[rowNo].insertCell(1);tbody.rows[rowNo].cells[1].innerHTML = "<input name='radioRMS' type='radio' value='1'></input>";tbody.rows[rowNo].insertCell(2);tbody.rows[rowNo].cells[2].innerHTML = "<input name='checkboxRMS' type='checkbox' value='1'></input>";tbody.rows[rowNo].insertCell(3);tbody.rows[rowNo].cells[3].innerHTML = "<input name='descript' type='text' value='des" + (rowNo + 1) + "'></input>";tbody.rows[rowNo].insertCell(4);tbody.rows[rowNo].cells[4].innerHTML = "<input type='button' value='删除' onclick='ttable.deleteRow(event)'/><input type='button' value='编辑' onclick='ttable.editRow(event)'/><a href='javascript:void(0)' onclick='ttable.moveUp(this)'>↑</a> <a href='javascript:void(0)' onclick='ttable.moveDown(this)'>↓</a>";tbody.rows[rowNo].onclick = ttable.changeActiveRow;},deleteRow: function(eve) {if (confirm(this.init.delMsg)) {element = window.event ? window.event.srcElement : eve.target;var rowNo = element.parentNode.parentNode.rowIndex;var tbody = document.getElementById(this.init.tId);tbody.deleteRow(rowNo - 1);}},editRow: function() {var element = window.event ? window.event.srcElement : eve.target;alert(element);},changeActiveRow: function() { //设置选中行的背景色eve = arguments[0];element = window.event ? window.event.srcElement : eve.target;obj = element.parentNode;while (obj && obj.tagName != "TR") {obj = obj.parentNode;if (currentActiveRow)currentActiveRow.style.backgroundColor = "";currentActiveRow = obj;currentActiveRow.style.backgroundColor = "Red";}},cleanWhitespace: function(element) {//遍历element的子节点for (var i = 0; i < element.childNodes.length; i++) {var node = element.childNodes[i];if (node.nodeType == 3 && !//s/.test(node.nodue))node.parentNode.removeChild(node);} //使表格行上移，接收参数为链接对象},moveUp: function(_a) {var _table = document.getElementById(this.init.tId);ttable.cleanWhitespace(_table);//var _row = _a.parentNode.parentNode;var _row = currentActiveRow;//如果不是第一行 交换顺序if (_row.previousSibling)ttable.swapNode(_row, _row.previousSibling);},moveDown: function(_a) {var _table = document.getElementById(this.init.tId);ttable.cleanWhitespace(_table);//通过链接对象获取表格行的引用//var _row = _a.parentNode.parentNode;var _row = currentActiveRow;//如果不是最后一行 则与下一行交换顺序if (_row.nextSibling)ttable.swapNode(_row, _row.nextSibling);},swapNode: function(node1, node2) {var _parent = node1.parentNode;var _t1 = node1.nextSibling;var _t2 = node2.nextSibling;//将node2插入到原来node1的位置if (_t1)_parent.insertBefore(node2, _t1);else_parent.appendChild(node2);//将node1插入到原来ndoe2的位置if (_t2)_parent.insertBefore(node1, _t2);else_parent.appendChild(node1);}}var ttable = new customTable();</script>其中ＨＴＭＬ中的：
<table id="tableSpan"><thead id="thead"><tr onclick="ttable.changeActiveRow(this);"><td>序号</td><td>缺省</td><td>启用</td><td>选项内容</td><td>操作</td></tr></thead><tbody id="tbody"></tbody></table><button onclick="ttable.addRow()" value="添加">添加</button><button onclick="ttable.moveUp()" value="添加">↑</button><button onclick="ttable.moveDown()" value="添加">↓</button>
以上所述是小编给大家介绍的JS封装的自动创建表格的实现代码的全部叙述，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持！