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 相关文章推荐
setTimeout和setInterval的浏览器兼容性分析
Feb 27 Javascript
jQuery Clone Bug解决代码
Dec 22 Javascript
7款吸引人眼球的jQuery/CSS3特效实例分享
Apr 25 Javascript
jquery与js函数冲突的两种解决方法
Sep 09 Javascript
原生javascript实现的一个简单动画效果
Mar 30 Javascript
JS插件plupload.js实现多图上传并显示进度条
Nov 29 Javascript
实现一个简单的vue无限加载指令方法
Jan 10 Javascript
深入理解Node中的buffer模块
Jun 03 Javascript
bootstrap table插件的分页与checkbox使用详解
Jul 23 Javascript
Vue中如何实现proxy代理
Apr 20 Javascript
node.js爬取中关村的在线电瓶车信息
Nov 13 Javascript
在JavaScript中使用严格模式(Strict Mode)
Jun 13 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
回首过去10年中最搞笑的10部动漫,哪一部让你节操尽碎?
2020/03/03 日漫
php实现mysql数据库操作类分享
2014/02/14 PHP
PHP IDE phpstorm 常用快捷键
2015/05/18 PHP
基于jquery库的tab新形式使用
2012/11/16 Javascript
JS中数组Array的用法示例介绍
2014/02/20 Javascript
JS实现的4种数字千位符格式化方法分享
2015/03/02 Javascript
Javascript函数的参数
2015/07/16 Javascript
基于javascript数组实现图片轮播
2016/05/02 Javascript
分享JS数组求和与求最大值的方法
2016/08/11 Javascript
jQuery得到多个值只能用取Class ,不能用取ID的方法
2016/12/04 Javascript
详解vue-cli中配置sass
2017/06/21 Javascript
js中的事件委托或是事件代理使用详解
2017/06/23 Javascript
Kindeditor单独调用多图上传实例
2017/07/31 Javascript
快速搭建React的环境步骤详解
2017/11/06 Javascript
Array数组对象中的forEach、map、filter及reduce详析
2018/08/02 Javascript
JavaScript格式化json和xml的方法示例
2019/01/22 Javascript
使用post方法实现json往返传输数据的方法
2019/03/30 Javascript
Vue + Element UI图片上传控件使用详解
2019/08/20 Javascript
JS代码屏蔽F12,右键,粘贴,复制,剪切,选中,操作实例
2019/09/17 Javascript
解决$store.getters调用不执行的问题
2019/11/08 Javascript
JavaScript监听触摸事件代码实例
2019/12/30 Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
2020/07/24 Javascript
python实现百度关键词排名查询
2014/03/30 Python
python实现k-means聚类算法
2018/02/23 Python
Pandas:Series和DataFrame删除指定轴上数据的方法
2018/11/10 Python
django框架模板中定义变量(set variable in django template)的方法分析
2019/06/24 Python
python的mysql数据库建立表与插入数据操作示例
2019/09/30 Python
Python+Appium实现自动化清理微信僵尸好友的方法
2021/02/04 Python
详解HTML5中CSS外观属性
2020/09/10 HTML / CSS
欧铁通票官方在线销售网站:Eurail.com
2017/10/14 全球购物
蛋糕店创业计划书
2014/05/06 职场文书
市级三好学生评语
2014/12/29 职场文书
未中标通知书
2015/04/17 职场文书
小学生心理健康活动总结
2015/05/08 职场文书
《时代广场的蟋蟀》读后感:真挚友情,温暖世界!
2020/01/08 职场文书
python全面解析接口返回数据
2022/02/12 Python