suchen

Heim >Web-Frontend >js-Tutorial >Zusammenfassung gängiger Operationsmethoden für JavaScript-Tabellen_Javascript-Kenntnisse

Zusammenfassung gängiger Operationsmethoden für JavaScript-Tabellen_Javascript-Kenntnisse

WBOY
WBOYOriginal
2016-05-16 16:04:101002Durchsuche

Die Beispiele in diesem Artikel fassen gängige Operationsmethoden von JavaScript-Tabellen zusammen. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
<script type="text/javascript">
var mytable=null;
window.onload=function(){
mytable=new CTable("tbl",10); //随机创建10行表格
}
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"&#63;document.getElementById(id):id;
if (rows && /^d+$/.test(rows)) this.addrows(rows) //为表格添加行数
}
CTable.prototype={
addrows:function(n){ //随机添加n行
new Array(n).each(this.add.bind(this))
},
add:function(){ //添加1行
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(){ //删除所选行
var self=this
$A(self.tbl.rows).each(function(tr){if (self.getChkBox(tr).checked) tr.parentNode.removeChild(tr)})
},
up:function(){ //上移所选行
  var self=this
  var upOne=function(tr){ //上移1行
  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)&#63;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(){ //随即选择几行数据
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(){ //设置行的背景色
var self=this;
var evt=arguments[0] || window.event
var chkbox=evt.srcElement || evt.target
var tr=chkbox.parentNode.parentNode
chkbox.checked&#63;self.setBgColor(tr):self.restoreBgColor(tr)
},
swapTr:function(tr1,tr2){ //交换tr1和tr2的位置
var target=(tr1.rowIndex<tr2.rowIndex)&#63;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)&#63;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>
</tr>
</table>
</body>
</html>

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So verwenden Sie „Replace“ zum Ersetzen von Zeichenfolgen in JavaScript_Javascript-TippsNächster Artikel：So verwenden Sie „Replace“ zum Ersetzen von Zeichenfolgen in JavaScript_Javascript-Tipps

In Verbindung stehende Artikel

Mehr sehen