html table 上移下移

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>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值