JavaScript表格常用操作方法汇总


Posted in Javascript onApril 15, 2015

本文实例汇总了JavaScript表格常用操作方法。分享给大家供大家参考。具体如下:

<!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"?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)?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?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>
</tr>
</table>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
浅谈关于JavaScript的语言特性分析
Apr 11 Javascript
鼠标划过实现延迟加载并隐藏层的js代码
Oct 11 Javascript
学习JavaScript设计模式之中介者模式
Jan 14 Javascript
实例详解jQuery的无new构建
Aug 02 Javascript
js图片上传前预览功能(兼容所有浏览器)
Aug 24 Javascript
文件上传,iframe跨域数据提交的实现
Nov 18 Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
Dec 14 Javascript
js仿淘宝评价评分功能
Feb 28 Javascript
微信小程序 在线支付功能的实现
Mar 14 Javascript
JavaScript中的事件与异常捕获详析
Feb 24 Javascript
js实现点赞效果
Mar 16 Javascript
JS深入学习之数组对象排序操作示例
May 01 Javascript
jQuery控制Div拖拽效果完整实例分析
Apr 15 #Javascript
详细解密jsonp跨域请求
Apr 15 #Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
Apr 15 #Javascript
javascript中Math.random()使用详解
Apr 15 #Javascript
js数组依据下标删除元素
Apr 14 #Javascript
js获取数组的最后一个元素
Apr 14 #Javascript
jQuery实现鼠标划过修改样式的方法
Apr 14 #Javascript
You might like
php中使用redis队列操作实例代码
2013/02/07 PHP
浅析php header 跳转
2013/06/17 PHP
PHP入门教程之图像处理技巧分析
2016/09/11 PHP
使用PHPMailer发送邮件实例
2017/02/15 PHP
Javascript之旅 对象的原型链之由来
2010/08/25 Javascript
一行代码告别document.getElementById
2012/06/01 Javascript
jquery怎样实现ajax联动框(二)
2013/03/08 Javascript
基于js disabled=&quot;false&quot;不起作用的解决办法
2013/06/26 Javascript
javascript读取Xml文件做一个二级联动菜单示例
2014/03/17 Javascript
在Ubuntu系统上安装Node.JS的教程
2015/10/15 Javascript
javascript实现数字倒计时特效
2016/03/30 Javascript
使用伪命名空间封装保护独自创建的对象方法
2016/08/04 Javascript
Node.js的文件权限及读写flag详解
2016/10/11 Javascript
用vue和node写的简易购物车实现
2017/04/25 Javascript
vue过渡和animate.css结合使用详解
2017/06/14 Javascript
纯js实现页面返回顶部的动画(超简单)
2017/08/10 Javascript
js动态添加表格逐行添加、删除、遍历取值的实例代码
2018/01/25 Javascript
vue-cli脚手架config目录下index.js配置文件的方法
2018/03/13 Javascript
详解jQuery获取特殊属性的值以及设置内容
2018/11/14 jQuery
JavaScript经典案例之简易计算器
2020/08/24 Javascript
[54:29]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第二场
2018/04/09 DOTA
Python将一个CSV文件里的数据追加到另一个CSV文件的方法
2018/07/04 Python
python 中如何获取列表的索引
2019/07/02 Python
Django框架安装方法图文详解
2019/11/04 Python
使用matplotlib绘制图例标签中带有公式的图
2019/12/13 Python
Python 列表的清空方式
2020/01/13 Python
PyQt5高级界面控件之QTableWidget的具体使用方法
2020/02/23 Python
利用matplotlib为图片上添加触发事件进行交互
2020/04/23 Python
Under Armour安德玛英国官网:美国高端运动科技品牌
2018/09/17 全球购物
CSMA/CD介质访问控制协议
2015/11/17 面试题
通信生自我鉴定
2014/01/18 职场文书
片区教研活动总结
2014/07/02 职场文书
化学专业毕业生求职信
2014/07/28 职场文书
关于感恩的演讲稿800字
2014/08/26 职场文书
助学金申请书该怎么写?
2019/07/16 职场文书
60条职场经典语录,总有一条能触动你的心
2019/08/21 职场文书