html 表格 上移下移行,html table 上移下移

1

2

3

4

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

5

6 varmytable= null;7 window.οnlοad= function() {8 mytable= newCTable("tbl",10);//随机创建10行表格

9 }10 Array.prototype.each= function(f) {//数组的遍历

11 for(vari= 0; i< this.length; i++) f(this[i], i,this)12 }13 function$A(arrayLike) {//数值的填充

14 for(vari= 0, ret=[]; i

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 functionCTable(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 newArray(n).each(this.add.bind(this))30 },31 add:function() {//添加1行

32 varself= this;33 vartr=self.tbl.insertRow(-1), td1=tr.insertCell(-1), td2=tr.insertCell(-1), td3=tr.insertCell(-1);34 varchkbox=document.createElement("INPUT")35 chkbox.type= "checkbox"

36 chkbox.οnclick=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 varself= this

44 $A(self.tbl.rows).each(function(tr) {if(self.getChkBox(tr).checked) tr.parentNode.removeChild(tr) })45 },46 up:function() {//上移所选行

47 varself= this

48 varupOne= 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 vararr=$A(self.tbl.rows).reverse()//反选

55 if(arr.length> 0 &&self.getChkBox(arr[arr.length- 1]).checked) {56 for(vari=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 varself= this

68 vardownOne= function(tr) {69 if(tr.rowIndex 0 &&self.getChkBox(arr[arr.length- 1]).checked) {76 for(vari=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 varself= this, order=arguments[0];88 varsortBy= function(a, b) {89 if(typeof(order)== "number") {//数字,则按数字指示的列排序

90 returnNumber(a.cells[order].innerHTML)>=Number(b.cells[order].innerHTML)? 1:-1;//转化为数字类型比较大小

91 }else if(typeof(order)== "function") {//返回结果排序

92 returnorder(a, b);93 }else{94 return 1;95 }96 }97 $A(self.tbl.rows).sort(sortBy).each(function(x) {98 varcheckStatus=self.getChkBox(x).checked;99 self.tbl.firstChild.appendChild(x);100 if(checkStatus) self.getChkBox(x).checked=checkStatus;101 });102 },103 rnd:function() {//随即选择几行数据

104 varself= 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 returnalert("无数据可以选")113 }114 newArray(selmax).each(function() {115 vartr=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 varself= this;122 varevt=arguments[0]||window.event123 varchkbox=evt.srcElement||evt.target124 vartr=chkbox.parentNode.parentNode125 chkbox.checked?self.setBgColor(tr) : self.restoreBgColor(tr)126 },127 swapTr:function(tr1, tr2) {//交换tr1和tr2的位置

128 vartarget=(tr1.rowIndex

134 returntr.cells[0].firstChild135 },136 restoreBgColor:function(tr) {137 tr.style.backgroundColor= "#ffffff"

138 },139 setBgColor:function(tr) {//设置背景色

140 tr.style.backgroundColor= "#c0c0c0"

141 }142 }143

144 functionf(a, b) {145 varsumRow= function(row) {returnNumber(row.cells[1].innerHTML)+Number(row.cells[2].innerHTML) };146 returnsumRow(a)>sumRow(b)? 1:-1;147 }148

149

150

151

152 随机选择行

153

154 添加一行

155

156 删除选定行

157

158 上移选定行

159

160 下移选定行

161

162 按第一列排序

163

164 按数据和排序

165

166

167

168

169

170

171

172

173

174

175

176