js操作表格操方法,增加,修改,删除，一行记录

来源：互联网发布：冰川网络编辑：程序博客网时间：2024/05/16 19:07

代码入下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>js操作表格操方法,增加,修改,删除，一行记录</title> <script type="text/javascript"> var mytable = null; window.onload = function () { mytable = new CTable("tbl", 10); //随机创建10行表格 } Array.prototype.each = function (f) { //数组的遍历 for (var i = 0; i < this.length; i++) f(this[i], i, this) } function $A(arrayLike) { //数值的填充 for (var i = 0, ret = []; i < arrayLike.length; i++) ret.push(arrayLike[i]); return ret } Function.prototype.bind = function () { //数据的绑定 var __method = this, args = $A(arguments), object = args.shift(); return function () { return __method.apply(object, args.concat($A(arguments))); } } function CTable(id, rows) { this.tbl = typeof (id) == "string" ? document.getElementById(id) : id; if (rows && /^\d+$/.test(rows)) this.addrows(rows) //为表格添加行数 } CTable.prototype = { addrows: function (n) { //随机添加n行 new Array(n).each(this.add.bind(this)) }, add: function () { //添加1行 var self = this; var tr = self.tbl.insertRow(-1), td1 = tr.insertCell(-1), td2 = tr.insertCell(-1), td3 = tr.insertCell(-1); var chkbox = document.createElement("INPUT") chkbox.type = "checkbox" chkbox.onclick = self.highlight.bind(self) td1.appendChild(chkbox) //第一列添加复选框 td1.setAttribute("width", "35") td2.innerHTML = Math.ceil(Math.random() * 99) //第二列的随机填充值 td3.innerHTML = Math.ceil(Math.random() * 99) //第三列的随机填充值 }, del: function () { //删除所选行 var self = this $A(self.tbl.rows).each(function (tr) { if (self.getChkBox(tr).checked) tr.parentNode.removeChild(tr) }) }, up: function () { //上移所选行 var self = this var upOne = function (tr) { //上移1行 if (tr.rowIndex > 0) { self.swapTr(tr, self.tbl.rows[tr.rowIndex - 1]) self.getChkBox(tr).checked = true } } var arr = $A(self.tbl.rows).reverse() //反选 if (arr.length > 0 && self.getChkBox(arr[arr.length - 1]).checked) { for (var i = arr.length - 1; i >= 0; i--) { if (self.getChkBox(arr[i]).checked) { arr.pop() } else { break } } } arr.reverse().each(function (tr) { if (self.getChkBox(tr).checked) upOne(tr) }); }, down: function () { //下移所选行 var self = this var downOne = function (tr) { if (tr.rowIndex < self.tbl.rows.length - 1) { self.swapTr(tr, self.tbl.rows[tr.rowIndex + 1]); self.getChkBox(tr).checked = true; } } var arr = $A(self.tbl.rows) if (arr.length > 0 && self.getChkBox(arr[arr.length - 1]).checked) { for (var i = arr.length - 1; i >= 0; i--) { if (self.getChkBox(arr[i]).checked) { arr.pop() } else { break } } } arr.reverse().each(function (tr) { if (self.getChkBox(tr).checked) downOne(tr) }); }, sort: function () { //排序 var self = this, order = arguments[0]; var sortBy = function (a, b) { if (typeof (order) == "number") { //数字,则按数字指示的列排序 return Number(a.cells[order].innerHTML) >= Number(b.cells[order].innerHTML) ? 1 : -1; //转化为数字类型比较大小 } else if (typeof (order) == "function") { //返回结果排序 return order(a, b); } else { return 1; } } $A(self.tbl.rows).sort(sortBy).each(function (x) { var checkStatus = self.getChkBox(x).checked; self.tbl.firstChild.appendChild(x); if (checkStatus) self.getChkBox(x).checked = checkStatus; }); }, rnd: function () { //随即选择几行数据 var self = this, selmax = 0, tbl = self.tbl; if (tbl.rows.length) { selmax = Math.max(Math.ceil(tbl.rows.length / 4), 1); //选择的行数不超过tr数的1/4 $A(tbl.rows).each(function (x) { self.getChkBox(x).checked = false; self.restoreBgColor(x) }) } else { return alert("无数据可以选") } new Array(selmax).each(function () { var tr = tbl.rows[Math.floor(Math.random() * tbl.rows.length)] self.getChkBox(tr).checked = true; self.highlight({ target: self.getChkBox(tr) }) }) }, highlight: function () { //设置行的背景色 var self = this; var evt = arguments[0] || window.event var chkbox = evt.srcElement || evt.target var tr = chkbox.parentNode.parentNode chkbox.checked ? self.setBgColor(tr) : self.restoreBgColor(tr) }, swapTr: function (tr1, tr2) { //交换tr1和tr2的位置 var target = (tr1.rowIndex < tr2.rowIndex) ? tr2.nextSibling : tr2; var tBody = tr1.parentNode tBody.replaceChild(tr2, tr1); tBody.insertBefore(tr1, target); }, getChkBox: function (tr) { //从tr得到 checkbox对象 return tr.cells[0].firstChild }, restoreBgColor: function (tr) { tr.style.backgroundColor = "#ffffff" }, setBgColor: function (tr) { //设置背景色 tr.style.backgroundColor = "#c0c0c0" } } function f(a, b) { var sumRow = function (row) { return Number(row.cells[1].innerHTML) + Number(row.cells[2].innerHTML) }; return sumRow(a) > sumRow(b) ? 1 : -1; } </script> </head> <body> <button onclick="javascript:mytable.rnd()"> 随机选择行</button> <button onclick="javascript:mytable.add()"> 添加一行</button> <button onclick="javascript:mytable.del()"> 删除选定行</button> <button onclick="javascript:mytable.up()"> 上移选定行</button> <button onclick="javascript:mytable.down()"> 下移选定行</button> <button onclick="javascript:mytable.sort(1)"> 按第一列排序</button> <button onclick="javascript:mytable.sort(f)"> 按数据和排序</button> <br /> <br /> <table width="100%"> <tr> <td valign="top"> <table border id="tbl" width="80%"> </table> </td> </tr> </table> </body> </html> 实现结果如下：