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对内存分配及管理机制详细解析
Nov 11 Javascript
JS(JQuery)操作Array的相关方法介绍
Feb 11 Javascript
jQuery自定义添加&quot;$&quot;与解决&quot;$&quot;冲突的方法
Jan 19 Javascript
实现前后端数据交互方法汇总
Apr 07 Javascript
在 Express 中使用模板引擎
Dec 10 Javascript
javascript如何定义对象数组
Jun 07 Javascript
jquery自动补齐功能插件flexselect用法示例
Aug 06 Javascript
jquery-mobile基础属性与用法详解
Nov 23 Javascript
Node.js中process模块常用的属性和方法
Dec 13 Javascript
微信小程序之获取当前位置经纬度以及地图显示详解
May 09 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 jQuery
vue实现计步器功能
Nov 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无限极分类实现的两种解决方法
2013/04/28 PHP
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
jquery 图片Silhouette Fadeins渐显效果
2010/02/07 Javascript
jQuery自动完成插件completer附源码下载
2016/01/04 Javascript
jQuery模拟物体自由落体运动(附演示与demo源码下载)
2016/01/21 Javascript
AngularJs 弹出模态框(model)
2016/04/07 Javascript
三种带箭头提示框总结实例
2016/06/14 Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
2017/03/02 Javascript
JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】
2017/04/19 Javascript
详解Vue中状态管理Vuex
2017/05/11 Javascript
JavaScript 五大常见函数
2018/03/23 Javascript
浅谈Express.js解析Post数据类型的正确姿势
2019/05/30 Javascript
使用webpack搭建vue项目及注意事项
2019/06/10 Javascript
利用vue-i18n实现多语言切换效果的方法
2019/06/19 Javascript
nodejs实现获取本地文件夹下图片信息功能示例
2019/06/22 NodeJs
Vue使用mixin分发组件的可复用功能
2019/09/01 Javascript
[01:52]PWL S2开团时刻第四期——DOTA2成语故事
2020/12/03 DOTA
Python虚拟环境Virtualenv使用教程
2015/05/18 Python
使用Python编写基于DHT协议的BT资源爬虫
2016/03/19 Python
Python抓取手机号归属地信息示例代码
2016/11/28 Python
Django单元测试工具test client使用详解
2019/08/02 Python
PyQT5 实现快捷键复制表格数据的方法示例
2020/06/19 Python
Python中random模块常用方法的使用教程
2020/10/04 Python
html5 canvas 简单画板实现代码
2012/01/05 HTML / CSS
加拿大床上用品、家居装饰、厨房和浴室产品购物网站:Linen Chest
2018/06/05 全球购物
德国运动营养和健身网上商店:Myprotein.de
2018/07/18 全球购物
新英格兰最大的特色礼品连锁店:The Paper Store
2018/07/23 全球购物
如何写一个Java类既可以用作applet也可以用作java应用
2016/01/18 面试题
骨干教师培训方案
2014/05/06 职场文书
房屋财产继承协议书范本
2014/11/03 职场文书
校本研修个人总结
2015/02/28 职场文书
2015年实习单位评语
2015/03/25 职场文书
毕业生学校组织意见
2015/06/04 职场文书
好员工观后感
2015/06/17 职场文书
一行代码python实现文件共享服务器
2021/04/22 Python
Python数据结构之队列详解
2022/03/21 Python