首页 > 代码库 > js表格操作类（转）
js表格操作类（转）
//js表格操作类（转）地址
http://www.cnblogs.com/zyh-nhy/archive/2007/08/14/855063.html
另一个例子
http://www.oschina.net/code/snippet_1242747_23652
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 4 <style type="text/css">*{font-size:14px}button{margin:3px}</style> 5 <script type="text/javascript"> 6 7 var mytable=null,mytable2=null; 8 9 window.onload=function(){ 10 mytable=new CTable("tbl",10); 11 mytable2=new CTable("tbl2",6); 12 } 13 14 Array.prototype.each=function(f){for(var i=0;i<this.length;i++) f(this[i],i,this)} 15 16 function $A(arrayLike){ 17 for(var i=0,ret=[];i<arrayLike.length;i++) ret.push(arrayLike[i]); 18 return ret 19 } 20 21 Function.prototype.bind = function() { 22 var __method = this, args = $A(arguments), object = args.shift(); 23 return function() { 24 return __method.apply(object, args.concat($A(arguments))); 25 } 26 } 27 28 29 function CTable(id,rows){ 30 this.tbl=typeof(id)=="string"?document.getElementById(id):id; 31 if (rows && /^\d+$/.test(rows)) this.addrows(rows) 32 } 33 34 CTable.prototype={ 35 addrows:function(n){ //随机添加n个tr 36 new Array(n).each(this.add.bind(this)) 37 }, 38 add:function(){ //添加1个tr 39 var self=this; 40 var tr = self.tbl.insertRow(-1),td1= tr.insertCell(-1),td2= tr.insertCell(-1),td3= tr.insertCell(-1); 41 var chkbox=document.createElement("INPUT") 42 chkbox.type="checkbox" 43 chkbox.onclick=self.highlight.bind(self) 44 td1.appendChild(chkbox) 45 td1.setAttribute("width","35") 46 td2.innerHTML=Math.ceil(Math.random()*99) 47 td3.innerHTML=Math.ceil(Math.random()*99) 48 }, 49 del:function(){ //删除所选tr 50 var self=this 51 $A(self.tbl.rows).each(function(tr){if (self.getChkBox(tr).checked) tr.parentNode.removeChild(tr)}) 52 }, 53 up:function(){ //上移所选tr 54 var self=this 55 var upOne=function(tr){ //上移1个tr 56 if (tr.rowIndex>0){ 57 self.swapTr(tr,self.tbl.rows[tr.rowIndex-1]) 58 self.getChkBox(tr).checked=true 59 } 60 } 61 var arr=$A(self.tbl.rows).reverse() 62 if (arr.length>0 && self.getChkBox(arr[arr.length-1]).checked){ 63 for(var i=arr.length-1;i>=0;i--){ 64 if (self.getChkBox(arr[i]).checked){ 65 arr.pop() 66 }else{ 67 break 68 } 69 } 70 } 71 arr.reverse().each(function(tr){if (self.getChkBox(tr).checked) upOne(tr)}); 72 }, 73 down:function(){ 74 var self=this 75 var downOne=function(tr){ 76 if (tr.rowIndex<self.tbl.rows.length-1) { 77 self.swapTr(tr,self.tbl.rows[tr.rowIndex+1]); 78 self.getChkBox(tr).checked=true; 79 } 80 } 81 var arr=$A(self.tbl.rows) 82 83 if (arr.length>0 && self.getChkBox(arr[arr.length-1]).checked){ 84 for(var i=arr.length-1;i>=0;i--){ 85 if (self.getChkBox(arr[i]).checked){ 86 arr.pop() 87 }else{ 88 break 89 } 90 } 91 } 92 arr.reverse().each(function(tr){if (self.getChkBox(tr).checked) downOne(tr)}); 93 }, 94 sort:function(){ //排序 95 var self=this,order=arguments[0]; 96 var sortBy=function(a,b){ 97 if (typeof(order)=="number"){ //数字,则按数字指示的列排序 98 return Number(a.cells[order].innerHTML)>=Number(b.cells[order].innerHTML)?1:-1; //转化为数字类型比较大小 99 }else if (typeof(order)=="function"){ //为程序,按 程序的返回结果排序 100 return order(a,b); 101 }else{ 102 return 1; 103 } 104 } 105 $A(self.tbl.rows).sort(sortBy).each(function(x){ 106 var checkStatus=self.getChkBox(x).checked; 107 self.tbl.firstChild.appendChild(x); 108 if (checkStatus) self.getChkBox(x).checked=checkStatus; 109 }); 110 }, 111 rnd:function(){ //随即选择几行tr 112 var self=this,selmax=0,tbl=self.tbl; 113 if (tbl.rows.length){ 114 selmax=Math.max(Math.ceil(tbl.rows.length/4),1); //选择的行数不超过tr数的1/4 115 $A(tbl.rows).each(function(x){ 116 self.getChkBox(x).checked=false; 117 self.restoreBgColor(x) 118 }) 119 }else{ 120 return alert("无数据可以选") 121 } 122 new Array(selmax).each(function(){ 123 var tr=tbl.rows[Math.floor(Math.random()*tbl.rows.length)] 124 self.getChkBox(tr).checked=true; 125 self.highlight({target:self.getChkBox(tr)}) 126 }) 127 }, 128 highlight:function(){ //设置tr的背景色 129 var self=this; 130 var evt=arguments[0] || window.event 131 var chkbox=evt.srcElement || evt.target 132 var tr=chkbox.parentNode.parentNode 133 chkbox.checked?self.setBgColor(tr):self.restoreBgColor(tr) 134 }, 135 swapTr:function(tr1,tr2){ //交换tr1和tr2的位置 136 var target=(tr1.rowIndex<tr2.rowIndex)?tr2.nextSibling:tr2; 137 var tBody=tr1.parentNode 138 tBody.replaceChild(tr2,tr1); 139 tBody.insertBefore(tr1,target); 140 }, 141 getChkBox:function(tr){ //从tr得到 checkbox对象 142 return tr.cells[0].firstChild 143 }, 144 restoreBgColor:function(tr){ 145 tr.style.backgroundColor="#ffffff" 146 }, 147 setBgColor:function(tr){ 148 tr.style.backgroundColor="#c0c0c0" 149 } 150 } 151 152 function f(a,b){ 153 var sumRow=function(row){return Number(row.cells[1].innerHTML)+Number(row.cells[2].innerHTML)}; 154 return sumRow(a)>sumRow(b)?1:-1; 155 } 156 157 </script> 158 159 </head> 160 <body> 161 162 <button onClick="javascript:mytable.rnd()">随机选择行</button> 163 <button onClick="javascript:mytable.add()">添加一行</button> 164 <button onClick="javascript:mytable.del()">删除选定行</button> 165 <button onClick="javascript:mytable.up()">上移选定行</button> 166 <button onClick="javascript:mytable.down()">下移选定行</button> 167 <button onClick="javascript:mytable.sort(1)">按第一列数字排序</button> 168 <button onClick="javascript:mytable.sort(f)">按每行数据的和排序</button> 169 170 171 172 <table width=100%> 173 <tr> 174 <td valign="top"><table border id="tbl" width="80%"></table></td> 175 <td valign="top"><table border id="tbl2" width="80%"></table></td> 176 </tr> 177 </table> 178 179 180 181 <button onClick="javascript:mytable2.rnd()">随机选择行</button> 182 <button onClick="javascript:mytable2.add()">添加一行</button> 183 <button onClick="javascript:mytable2.del()">删除选定行</button> 184 <button onClick="javascript:mytable2.up()">上移选定行</button> 185 <button onClick="javascript:mytable2.down()">下移选定行</button> 186 <button onClick="javascript:mytable2.sort(2)">按第二列数字排序</button> 187 <button onClick="javascript:mytable2.sort(f)">按每行数据的和排序</button> 188 189 </body> 190 </html>
第二个地址代码
————————————————————————————————————————————————————————————————————————————————
1 <script type="text/javascript"> 2 var mytable = null; 3 window.onload = function () { 4 mytable = new CTable("tbl", 10); //随机创建10行表格 5 } 6 Array.prototype.each = function (f) { //数组的遍历 7 for (var i = 0; i < this.length; i++) f(this[i], i, this) 8 } 9 function $A(arrayLike) { //数值的填充 10 for (var i = 0, ret = []; i < arrayLike.length; i++) ret.push(arrayLike[i]); 11 return ret 12 } 13 Function.prototype.bind = function () { //数据的绑定 14 var __method = this, args = $A(arguments), object = args.shift(); 15 return function () { 16 return __method.apply(object, args.concat($A(arguments))); 17 } 18 } 19 function CTable(id, rows) { 20 this.tbl = typeof (id) == "string" ? document.getElementById(id) : id; 21 if (rows && /^\d+$/.test(rows)) this.addrows(rows) //为表格添加行数 22 } 23 CTable.prototype = { 24 addrows: function (n) { //随机添加n行 25 new Array(n).each(this.add.bind(this)) 26 }, 27 add: function () { //添加1行 28 var self = this; 29 var tr = self.tbl.insertRow(-1), td1 = tr.insertCell(-1), td2 = tr.insertCell(-1), td3 = tr.insertCell(-1); 30 var chkbox = document.createElement("INPUT") 31 chkbox.type = "checkbox" 32 chkbox.onclick = self.highlight.bind(self) 33 td1.appendChild(chkbox) //第一列添加复选框 34 td1.setAttribute("width", "35") 35 td2.innerHTML = Math.ceil(Math.random() * 99) //第二列的随机填充值 36 td3.innerHTML = Math.ceil(Math.random() * 99) //第三列的随机填充值 37 }, 38 del: function () { //删除所选行 39 var self = this 40 $A(self.tbl.rows).each(function (tr) { if (self.getChkBox(tr).checked) tr.parentNode.removeChild(tr) }) 41 }, 42 up: function () { //上移所选行 43 var self = this 44 var upOne = function (tr) { //上移1行 45 if (tr.rowIndex > 0) { 46 self.swapTr(tr, self.tbl.rows[tr.rowIndex - 1]) 47 self.getChkBox(tr).checked = true 48 } 49 } 50 var arr = $A(self.tbl.rows).reverse() //反选 51 if (arr.length > 0 && self.getChkBox(arr[arr.length - 1]).checked) { 52 for (var i = arr.length - 1; i >= 0; i--) { 53 if (self.getChkBox(arr[i]).checked) { 54 arr.pop() 55 } else { 56 break 57 } 58 } 59 } 60 arr.reverse().each(function (tr) { if (self.getChkBox(tr).checked) upOne(tr) }); 61 }, 62 down: function () { //下移所选行 63 var self = this 64 var downOne = function (tr) { 65 if (tr.rowIndex < self.tbl.rows.length - 1) { 66 self.swapTr(tr, self.tbl.rows[tr.rowIndex + 1]); 67 self.getChkBox(tr).checked = true; 68 } 69 } 70 var arr = $A(self.tbl.rows) 71 if (arr.length > 0 && self.getChkBox(arr[arr.length - 1]).checked) { 72 for (var i = arr.length - 1; i >= 0; i--) { 73 if (self.getChkBox(arr[i]).checked) { 74 arr.pop() 75 } else { 76 break 77 } 78 } 79 } 80 arr.reverse().each(function (tr) { if (self.getChkBox(tr).checked) downOne(tr) }); 81 }, 82 sort: function () { //排序 83 var self = this, order = arguments[0]; 84 var sortBy = function (a, b) { 85 if (typeof (order) == "number") { //数字,则按数字指示的列排序 86 return Number(a.cells[order].innerHTML) >= Number(b.cells[order].innerHTML) ? 1 : -1; //转化为数字类型比较大小 87 } else if (typeof (order) == "function") { //返回结果排序 88 return order(a, b); 89 } else { 90 return 1; 91 } 92 } 93 $A(self.tbl.rows).sort(sortBy).each(function (x) { 94 var checkStatus = self.getChkBox(x).checked; 95 self.tbl.firstChild.appendChild(x); 96 if (checkStatus) self.getChkBox(x).checked = checkStatus; 97 }); 98 }, 99 rnd: function () { //随即选择几行数据100 var self = this, selmax = 0, tbl = self.tbl;101 if (tbl.rows.length) {102 selmax = Math.max(Math.ceil(tbl.rows.length / 4), 1); //选择的行数不超过tr数的1/4103 $A(tbl.rows).each(function (x) {104 self.getChkBox(x).checked = false;105 self.restoreBgColor(x)106 })107 } else {108 return alert("无数据可以选")109 }110 new Array(selmax).each(function () {111 var tr = tbl.rows[Math.floor(Math.random() * tbl.rows.length)]112 self.getChkBox(tr).checked = true;113 self.highlight({ target: self.getChkBox(tr) })114 })115 },116 highlight: function () { //设置行的背景色117 var self = this;118 var evt = arguments[0] || window.event119 var chkbox = evt.srcElement || evt.target120 var tr = chkbox.parentNode.parentNode121 chkbox.checked ? self.setBgColor(tr) : self.restoreBgColor(tr)122 },123 swapTr: function (tr1, tr2) { //交换tr1和tr2的位置124 var target = (tr1.rowIndex < tr2.rowIndex) ? tr2.nextSibling : tr2;125 var tBody = tr1.parentNode126 tBody.replaceChild(tr2, tr1);127 tBody.insertBefore(tr1, target);128 },129 getChkBox: function (tr) { //从tr得到 checkbox对象130 return tr.cells[0].firstChild131 },132 restoreBgColor: function (tr) {133 tr.style.backgroundColor = "#ffffff"134 },135 setBgColor: function (tr) { //设置背景色136 tr.style.backgroundColor = "#c0c0c0"137 }138 }139 140 function f(a, b) {141 var sumRow = function (row) { return Number(row.cells[1].innerHTML) + Number(row.cells[2].innerHTML) };142 return sumRow(a) > sumRow(b) ? 1 : -1;143 }144 </script>
js表格操作类（转）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。