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条件判断使用小技巧总结
Sep 08 Javascript
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
Jun 08 Javascript
js简单实现用户注册信息的校验代码
Nov 15 Javascript
javascript中的if语句使用介绍
Nov 20 Javascript
使用jQuery实现星级评分代码分享
Dec 09 Javascript
浅谈js中的闭包
Mar 16 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
Jun 09 Javascript
浅谈jQuery中的checkbox问题
Aug 10 Javascript
jQuery UI插件实现百度提词器效果
Nov 21 Javascript
jQuery自定义插件详解及实例代码
Dec 29 Javascript
vue使用drag与drop实现拖拽的示例代码
Sep 07 Javascript
Vux+Axios拦截器增加loading的问题及实现方法
Nov 08 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产生动态的影像图
2006/10/09 PHP
php 模拟post_验证页面的返回状态(实例讲解)
2013/10/28 PHP
Zend Framework教程之模型Model基本规则和使用方法
2016/03/04 PHP
最新的10款jQuery内容滑块插件分享
2011/09/18 Javascript
JS打印gridview实现原理及代码
2013/02/05 Javascript
jquery中常用的函数和属性详细解析
2014/03/07 Javascript
JS基于cookie实现来宾统计记录访客信息的方法
2015/08/04 Javascript
学习javascript面向对象 理解javascript原型和原型链
2016/01/04 Javascript
JavaScript获取图片像素颜色并转换为box-shadow显示
2016/03/11 Javascript
js微信分享API
2020/10/11 Javascript
jquery.validate表单验证插件使用方法解析
2016/11/07 Javascript
史上最全JavaScript常用的简写技巧(推荐)
2017/08/17 Javascript
js登录滑动验证的实现(不滑动无法登陆)
2018/01/03 Javascript
web前端vue filter 过滤器
2018/01/12 Javascript
vue中使用cropperjs的方法
2018/03/01 Javascript
javaScript实现游戏倒计时功能
2018/11/17 Javascript
[43:32]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS NewBee第一场
2014/05/26 DOTA
Python编程给numpy矩阵添加一列方法示例
2017/12/04 Python
Python下使用Scrapy爬取网页内容的实例
2018/05/21 Python
Python数据类型之List列表实例详解
2019/05/08 Python
Python利用pandas处理Excel数据的应用详解
2019/06/18 Python
用Python实现将一张图片分成9宫格的示例
2019/07/05 Python
Django项目主urls导入应用中views的红线问题解决
2019/08/10 Python
python如何绘制疫情图
2020/09/16 Python
20佳惊艳的HTML5应用程序示例分享
2011/05/03 HTML / CSS
俄罗斯女装店:12storeez
2019/10/25 全球购物
电脑教师的教学自我评价
2013/11/26 职场文书
送货司机岗位职责
2013/12/11 职场文书
企业统计员岗位职责
2013/12/13 职场文书
幼儿园大班家长评语
2014/04/17 职场文书
群教个人对照检查材料
2014/08/20 职场文书
暑期政治学习心得体会
2014/09/02 职场文书
革命英雄事迹演讲稿
2014/09/13 职场文书
2014年幼儿园园务工作总结
2014/12/05 职场文书
2016年小学生教师节广播稿
2015/12/18 职场文书
求职自荐信该如何书写?
2019/06/24 职场文书