//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/4
103 $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.event
119 var chkbox = evt.srcElement || evt.target
120 var tr = chkbox.parentNode.parentNode
121 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.parentNode
126 tBody.replaceChild(tr2, tr1);
127 tBody.insertBefore(tr1, target);
128 },
129 getChkBox: function (tr) { //从tr得到 checkbox对象
130 return tr.cells[0].firstChild
131 },
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>
时间： 2024-10-05 05:31:29