js表格动态操作

最新推荐文章于 2022-11-19 09:22:57 发布
cxhzqhzq
最新推荐文章于 2022-11-19 09:22:57 发布
阅读量893
点赞数
分类专栏： web 文章标签： function javascript object button string input
web 专栏收录该内容
17 篇文章 0 订阅
订阅专栏
 
 <html>  
  <head>  
  <meta   http-equiv="Content-Type"   content="text/html;   charset=gb2312">  
  <style   type="text/css">*{font-size:14px}button{margin:3px}</style>  
  <script   type="text/javascript">  
   
  var   mytable=null,mytable2=null;  
   
  window.onload=function(){  
  mytable=new   CTable("tbl",10);  
  mytable2=new   CTable("tbl2",6);  
  }  
   
  Array.prototype.each=function(f){for(var   i=0;i<this.length;i++)   f(this[i],i,this)}  
   
  function   $A(arrayLike){  
  for(var   i=0,ret=[];i<arrayLike.length;i++)   ret.push(arrayLike[i]);  
  return   ret  
  }  
   
  Function.prototype.bind   =   function()   {  
      var   __method   =   this,   args   =   $A(arguments),   object   =   args.shift();  
      return   function()   {  
          return   __method.apply(object,   args.concat($A(arguments)));  
      }  
  }  
   
   
  function   CTable(id,rows){  
  this.tbl=typeof(id)=="string"?document.getElementById(id):id;    
  if   (rows   &&   /^/d+$/.test(rows))   this.addrows(rows)  
  }  
   
  CTable.prototype={  
  addrows:function(n){                     //随机添加n个tr  
  new   Array(n).each(this.add.bind(this))  
  },  
  add:function(){                       //添加1个tr  
  var   self=this;  
  var   tr   =   self.tbl.insertRow(-1),td1=   tr.insertCell(-1),td2=   tr.insertCell(-1),td3=   tr.insertCell(-1);  
  var   chkbox=document.createElement("INPUT")  
  chkbox.type="checkbox"  
  chkbox.onclick=self.highlight.bind(self)  
  td1.appendChild(chkbox)  
  td1.setAttribute("width","35")  
  td2.innerHTML=Math.ceil(Math.random()*99)  
  td3.innerHTML=Math.ceil(Math.random()*99)  
  },  
  del:function(){                       //删除所选tr  
  var   self=this  
  $A(self.tbl.rows).each(function(tr){if   (self.getChkBox(tr).checked)   tr.parentNode.removeChild(tr)})  
  },  
  up:function(){                             //上移所选tr  
  var   self=this  
  var   upOne=function(tr){                     //上移1个tr  
  if   (tr.rowIndex>0){  
  self.swapTr(tr,self.tbl.rows[tr.rowIndex-1])  
  self.getChkBox(tr).checked=true  
  }  
  }  
  var   arr=$A(self.tbl.rows).reverse()  
  if   (arr.length>0   &&   self.getChkBox(arr[arr.length-1]).checked){  
  for(var   i=arr.length-1;i>=0;i--){  
  if   (self.getChkBox(arr[i]).checked){  
  arr.pop()                        
  }else{  
  break  
  }  
  }  
  }  
  arr.reverse().each(function(tr){if   (self.getChkBox(tr).checked)   upOne(tr)});  
  },  
  down:function(){  
  var   self=this  
  var   downOne=function(tr){              
  if   (tr.rowIndex<self.tbl.rows.length-1)     {  
  self.swapTr(tr,self.tbl.rows[tr.rowIndex+1]);  
  self.getChkBox(tr).checked=true;  
  }  
  }  
  var   arr=$A(self.tbl.rows)  
   
  if   (arr.length>0   &&   self.getChkBox(arr[arr.length-1]).checked){  
  for(var   i=arr.length-1;i>=0;i--){  
  if   (self.getChkBox(arr[i]).checked){  
  arr.pop()  
  }else{  
  break  
  }  
  }  
  }  
  arr.reverse().each(function(tr){if   (self.getChkBox(tr).checked)   downOne(tr)});  
  },  
  sort:function(){                       //排序      
  var   self=this,order=arguments[0];  
  var   sortBy=function(a,b){  
  if   (typeof(order)=="number"){     //数字,则按数字指示的列排序  
  return   Number(a.cells[order].innerHTML)>=Number(b.cells[order].innerHTML)?1:-1;       //转化为数字类型比较大小  
  }else   if   (typeof(order)=="function"){           //为程序,按   程序的返回结果排序  
  return   order(a,b);  
  }else{  
  return   1;  
  }  
  }  
  $A(self.tbl.rows).sort(sortBy).each(function(x){  
  var   checkStatus=self.getChkBox(x).checked;  
  self.tbl.firstChild.appendChild(x);  
  if   (checkStatus)   self.getChkBox(x).checked=checkStatus;  
  });  
  },  
  rnd:function(){                       //随即选择几行tr  
  var   self=this,selmax=0,tbl=self.tbl;  
  if   (tbl.rows.length){  
    selmax=Math.max(Math.ceil(tbl.rows.length/4),1);     //选择的行数不超过tr数的1/4  
    $A(tbl.rows).each(function(x){  
  self.getChkBox(x).checked=false;  
  self.restoreBgColor(x)  
  })  
  }else{  
  return   alert("无数据可以选")  
  }  
  new   Array(selmax).each(function(){  
  var   tr=tbl.rows[Math.floor(Math.random()*tbl.rows.length)]  
  self.getChkBox(tr).checked=true;  
  self.highlight({target:self.getChkBox(tr)})  
  })  
  },  
  highlight:function(){                               //设置tr的背景色  
  var   self=this;  
  var   evt=arguments[0]   ||   window.event  
  var   chkbox=evt.srcElement   ||   evt.target  
  var   tr=chkbox.parentNode.parentNode  
  chkbox.checked?self.setBgColor(tr):self.restoreBgColor(tr)  
  },  
  swapTr:function(tr1,tr2){                           //交换tr1和tr2的位置  
  var   target=(tr1.rowIndex<tr2.rowIndex)?tr2.nextSibling:tr2;  
  var   tBody=tr1.parentNode  
  tBody.replaceChild(tr2,tr1);  
          tBody.insertBefore(tr1,target);  
  },  
  getChkBox:function(tr){                       //从tr得到   checkbox对象  
  return   tr.cells[0].firstChild  
  },  
  restoreBgColor:function(tr){                      
  tr.style.backgroundColor="#ffffff"    
  },  
  setBgColor:function(tr){  
  tr.style.backgroundColor="#c0c0c0"  
  }  
  }  
   
  function   f(a,b){  
  var   sumRow=function(row){return   Number(row.cells[1].innerHTML)+Number(row.cells[2].innerHTML)};  
  return   sumRow(a)>sumRow(b)?1:-1;  
  }  
   
  </script>  
   
  </head>  
  <body>  
   
  <button     onClick="javascript:mytable.rnd()">随机选择行</button>  
  <button     onClick="javascript:mytable.add()">添加一行</button>  
  <button     onClick="javascript:mytable.del()">删除选定行</button>  
  <button     onClick="javascript:mytable.up()">上移选定行</button>  
  <button     onClick="javascript:mytable.down()">下移选定行</button>  
  <button     onClick="javascript:mytable.sort(1)">按第一列数字排序</button>  
  <button     onClick="javascript:mytable.sort(f)">按每行数据的和排序</button>  
  <br><br>  
  <table   width=100%>  
  <tr>  
  <td   valign="top"><table   border   id="tbl"   width="80%"></table></td>  
  <td   valign="top"><table   border   id="tbl2"   width="80%"></table></td>  
  </tr>  
  </table>  
  <br><br>  
  <button     onClick="javascript:mytable2.rnd()">随机选择行</button>  
  <button     onClick="javascript:mytable2.add()">添加一行</button>  
  <button     onClick="javascript:mytable2.del()">删除选定行</button>  
  <button     onClick="javascript:mytable2.up()">上移选定行</button>  
  <button     onClick="javascript:mytable2.down()">下移选定行</button>  
  <button     onClick="javascript:mytable2.sort(2)">按第二列数字排序</button>  
  <button     onClick="javascript:mytable2.sort(f)">按每行数据的和排序</button>  
   
  </body>  
  </html>  
    
 
cxhzqhzq
关注
0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
js表格动态操作

html> head> meta http-equiv="Content-Type" content="text/html; charset=gb2312"> style type="text/css">*{font-size:14px}button{margin:3px}style> script type="text/javascript">
复制链接

扫一扫