js操作表格操方法,增加,修改,删除，一行记录
随机选择行 添加一行 删除选定行 上移选定行 下移选定行 按第一列排序 按数据和排序
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>js操作表格操方法,增加,修改,删除，一行记录</title> 5 <script type="text/javascript"> 6 var mytable = null; 7 window.onload = function () { 8 mytable = new CTable("tbl", 10); //随机创建10行表格 9 } 10 Array.prototype.each = function (f) { //数组的遍历 11 for (var i = 0; i < this.length; i++) f(this[i], i, this) 12 } 13 function $A(arrayLike) { //数值的填充 14 for (var i = 0, ret = []; i < arrayLike.length; i++) ret.push(arrayLike[i]); 15 return ret 16 } 17 Function.prototype.bind = function () { //数据的绑定 18 var __method = this, args = $A(arguments), object = args.shift(); 19 return function () { 20 return __method.apply(object, args.concat($A(arguments))); 21 } 22 } 23 function CTable(id, rows) { 24 this.tbl = typeof (id) == "string" ? document.getElementById(id) : id; 25 if (rows && /^\d+$/.test(rows)) this.addrows(rows) //为表格添加行数 26 } 27 CTable.prototype = { 28 addrows: function (n) { //随机添加n行 29 new Array(n).each(this.add.bind(this)) 30 }, 31 add: function () { //添加1行 32 var self = this; 33 var tr = self.tbl.insertRow(-1), td1 = tr.insertCell(-1), td2 = tr.insertCell(-1), td3 = tr.insertCell(-1); 34 var chkbox = document.createElement("INPUT") 35 chkbox.type = "checkbox" 36 chkbox.onclick = self.highlight.bind(self) 37 td1.appendChild(chkbox) //第一列添加复选框 38 td1.setAttribute("width", "35") 39 td2.innerHTML = Math.ceil(Math.random() * 99) //第二列的随机填充值 40 td3.innerHTML = Math.ceil(Math.random() * 99) //第三列的随机填充值 41 }, 42 del: function () { //删除所选行 43 var self = this 44 $A(self.tbl.rows).each(function (tr) { if (self.getChkBox(tr).checked) tr.parentNode.removeChild(tr) }) 45 }, 46 up: function () { //上移所选行 47 var self = this 48 var upOne = function (tr) { //上移1行 49 if (tr.rowIndex > 0) { 50 self.swapTr(tr, self.tbl.rows[tr.rowIndex - 1]) 51 self.getChkBox(tr).checked = true 52 } 53 } 54 var arr = $A(self.tbl.rows).reverse() //反选 55 if (arr.length > 0 && self.getChkBox(arr[arr.length - 1]).checked) { 56 for (var i = arr.length - 1; i >= 0; i--) { 57 if (self.getChkBox(arr[i]).checked) { 58 arr.pop() 59 } else { 60 break 61 } 62 } 63 } 64 arr.reverse().each(function (tr) { if (self.getChkBox(tr).checked) upOne(tr) }); 65 }, 66 down: function () { //下移所选行 67 var self = this 68 var downOne = function (tr) { 69 if (tr.rowIndex < self.tbl.rows.length - 1) { 70 self.swapTr(tr, self.tbl.rows[tr.rowIndex + 1]); 71 self.getChkBox(tr).checked = true; 72 } 73 } 74 var arr = $A(self.tbl.rows) 75 if (arr.length > 0 && self.getChkBox(arr[arr.length - 1]).checked) { 76 for (var i = arr.length - 1; i >= 0; i--) { 77 if (self.getChkBox(arr[i]).checked) { 78 arr.pop() 79 } else { 80 break 81 } 82 } 83 } 84 arr.reverse().each(function (tr) { if (self.getChkBox(tr).checked) downOne(tr) }); 85 }, 86 sort: function () { //排序 87 var self = this, order = arguments[0]; 88 var sortBy = function (a, b) { 89 if (typeof (order) == "number") { //数字,则按数字指示的列排序 90 return Number(a.cells[order].innerHTML) >= Number(b.cells[order].innerHTML) ? 1 : -1; //转化为数字类型比较大小 91 } else if (typeof (order) == "function") { //返回结果排序 92 return order(a, b); 93 } else { 94 return 1; 95 } 96 } 97 $A(self.tbl.rows).sort(sortBy).each(function (x) { 98 var checkStatus = self.getChkBox(x).checked; 99 self.tbl.firstChild.appendChild(x); 100 if (checkStatus) self.getChkBox(x).checked = checkStatus; 101 }); 102 }, 103 rnd: function () { //随即选择几行数据 104 var self = this, selmax = 0, tbl = self.tbl; 105 if (tbl.rows.length) { 106 selmax = Math.max(Math.ceil(tbl.rows.length / 4), 1); //选择的行数不超过tr数的1/4 107 $A(tbl.rows).each(function (x) { 108 self.getChkBox(x).checked = false; 109 self.restoreBgColor(x) 110 }) 111 } else { 112 return alert("无数据可以选") 113 } 114 new Array(selmax).each(function () { 115 var tr = tbl.rows[Math.floor(Math.random() * tbl.rows.length)] 116 self.getChkBox(tr).checked = true; 117 self.highlight({ target: self.getChkBox(tr) }) 118 }) 119 }, 120 highlight: function () { //设置行的背景色 121 var self = this; 122 var evt = arguments[0] || window.event 123 var chkbox = evt.srcElement || evt.target 124 var tr = chkbox.parentNode.parentNode 125 chkbox.checked ? self.setBgColor(tr) : self.restoreBgColor(tr) 126 }, 127 swapTr: function (tr1, tr2) { //交换tr1和tr2的位置 128 var target = (tr1.rowIndex < tr2.rowIndex) ? tr2.nextSibling : tr2; 129 var tBody = tr1.parentNode 130 tBody.replaceChild(tr2, tr1); 131 tBody.insertBefore(tr1, target); 132 }, 133 getChkBox: function (tr) { //从tr得到 checkbox对象 134 return tr.cells[0].firstChild 135 }, 136 restoreBgColor: function (tr) { 137 tr.style.backgroundColor = "#ffffff" 138 }, 139 setBgColor: function (tr) { //设置背景色 140 tr.style.backgroundColor = "#c0c0c0" 141 } 142 } 143 144 function f(a, b) { 145 var sumRow = function (row) { return Number(row.cells[1].innerHTML) + Number(row.cells[2].innerHTML) }; 146 return sumRow(a) > sumRow(b) ? 1 : -1; 147 } 148 </script> 149 </head> 150 <body> 151 <button onclick="javascript:mytable.rnd()"> 152 随机选择行</button> 153 <button onclick="javascript:mytable.add()"> 154 添加一行</button> 155 <button onclick="javascript:mytable.del()"> 156 删除选定行</button> 157 <button onclick="javascript:mytable.up()"> 158 上移选定行</button> 159 <button onclick="javascript:mytable.down()"> 160 下移选定行</button> 161 <button onclick="javascript:mytable.sort(1)"> 162 按第一列排序</button> 163 <button onclick="javascript:mytable.sort(f)"> 164 按数据和排序</button> 165 <br /> 166 <br /> 167 <table width="100%"> 168 <tr> 169 <td valign="top"> 170 <table border id="tbl" width="80%"> 171 </table> 172 </td> 173 </tr> 174 </table> 175 </body> 176 </html>
406
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
