JS封装的自动创建表格的实现代码

为接下来要做一个动态输入的表格积累的资料，非常不错，下面分享给大家，供大家参考，如果有更好的插件和封装的东西，共享下哈。。

关键代码如下：

<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 和innerHTML tbody.rows[rowNo].insertCell(1); tbody.rows[rowNo].cells[1].innerHTML = "<input type='radio' value='1'></input>"; tbody.rows[rowNo].insertCell(2); tbody.rows[rowNo].cells[2].innerHTML = "<input type='checkbox' value='1'></input>"; tbody.rows[rowNo].insertCell(3); tbody.rows[rowNo].cells[3].innerHTML = "<input type='text' value='des" + (rowNo + 1) + "'></input>"; tbody.rows[rowNo].insertCell(4); tbody.rows[rowNo].cells[4].innerHTML = "<input type='button' value='删除'/><input type='button' value='编辑'/><a href='javascript:void(0)'>↑</a> &nbsp;&nbsp;<a href='javascript:void(0)'>↓</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> <thead> <tr> <td> 序号 </td> <td> 缺省 </td> <td> 启用 </td> <td> 选项内容 </td> <td> 操作 </td> </tr> </thead> <tbody> </tbody> </table> <button value="添加"> 添加</button> <button value="添加"> ↑</button> <button value="添加"> ↓</button>

以上所述是小编给大家介绍的JS封装的自动创建表格的实现代码的全部叙述，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章: