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

前端之家收集整理的这篇文章主要介绍了JS封装的自动创建表格的实现代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

关键代码如下:

删除吗?" },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 = ""; tbody.rows[rowNo].insertCell(2); tbody.rows[rowNo].cells[2].innerHTML = ""; tbody.rows[rowNo].insertCell(3); tbody.rows[rowNo].cells[3].innerHTML = ""; tbody.rows[rowNo].insertCell(4); tbody.rows[rowNo].cells[4].innerHTML = " "; 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();

其中HTML中的:

内容 添加"> 添加

以上所述是小编给大家介绍的JS封装的自动创建表格的实现代码的全部叙述。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

原文链接:https://www.f2er.com/js/47858.html

猜你在找的JavaScript相关文章