首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

动态表格Table类的实现

Posted in Javascript onAugust 26, 2009 
/// <reference path="Lib.js" /> 
/// <reference path="DabaBinder.js" /> 
//引入DataBinder.js 
include("DataBinder.js"); 
/* 
<table border="1"> 
<thead><tr> 
<th></th> 
</tr></thead> 
<tbody><tr> 
<td></td> 
</tr></tbody> 
</table> 
*/ 
function Table(){ 
this.elmTable=null; //表格标签 
this.templetRow=null; //模板行 
this.displayBody=null; //显示区tbody标签 
this.isOverChange=false; //鼠标移过时，是否改变颜色 
this.hoverColor="#EBF3FD"; //鼠标移过颜色 
this.isActiveChange=false; //行点击时，是否改变颜色 
this.activeColor="#D9E8FB"; //行点击时颜色 
this.activeRow=null; //当前活动行 
} 
Table.prototype = { 
//设置鼠标移过时，是否改变颜色 
SetOverChange: function(bOverChange) { 
this.isOverChange = bOverChange; 
}, 
//设置行点击时，是否改变颜色 
SetActiveChange: function(bActiveChange) { 
this.isActiveChange = bActiveChange; 
}, 
//绑定表格对象 
BindElement: function(elm) { 
this.elmTable = elm; 
Event.observe(this.elmTable, "mouseover", this.onMouseOver.bindAsEventListener(this)); 
Event.observe(this.elmTable, "mouseout", this.onMouseOut.bindAsEventListener(this)); 
Event.observe(this.elmTable, "click", this.onMouseClick.bindAsEventListener(this)); 
var tbody = this.elmTable.tBodies[0]; //取其第一个tbody为模板 
this.templetRow = tbody.rows[0]; //取该tbody中的第一行为模板 
this.elmTable.removeChild(tbody); 
this.displayBody = document.createElement("TBODY"); //创建显示区tbody 
this.elmTable.appendChild(this.displayBody); //添加到表格中 
}, 
//绑定表格的ID 
BindID: function(id) { 
var elm = document.getElementById(id); 
this.BindElement(elm); 
}, 
_getEventRow: function(evn) { 
var elm = Event.element(evn); 
if (elm == this.elmTable) return null; 
while (elm.tagName.toLowerCase() != "tr") { 
elm = elm.parentNode; 
if (elm == this.elmTable || elm == null) return null; 
} 
if (elm.parentNode != this.displayBody) return null; 
return elm; 
}, 
//鼠标移过时事件响应 
onMouseOver: function(evn) { 
var row = this._getEventRow(evn); 
if (!row) return; 
if (this.isOverChange) { 
row.style.backgroundColor = this.hoverColor; //改变颜色 
} 
}, 
//鼠标移出时事件响应 
onMouseOut: function(evn) { 
var row = this._getEventRow(evn); 
if (!row) return; 
if (this.isOverChange) { 
if (row == this.activeRow) { 
//如果当前行是活动行，设置活为动行颜色 
row.style.backgroundColor = this.activeColor; 
} 
else { 
//设置为模板行颜色 
row.style.backgroundColor = row.backgroundColor; 
} 
} 
}, 
//行点击事件响应 
onMouseClick: function(evn) { 
var row = this._getEventRow(evn); 
if (!row) return; 
if (this.isActiveChange) { 
if (this.activeRow != null) { 
//恢复原活动行颜色 
this.activeRow.style.backgroundColor = this.activeRow.backgroundColor; 
} 
//设置活动行颜色 
row.style.backgroundColor = this.activeColor; 
//设置当前行为活动行 
this.activeRow = row; 
} 
}, 
//新增一行，该行结构与模板行一致 
NewRow: function(bAdd) { 
var _this = this; 
var newRow = this.templetRow.cloneNode(true); //将模板行进行深层拷贝 
newRow.backgroundColor = newRow.style.backgroundColor; 
//添加到表格显示区中 
if (bAdd == true || bAdd == null) { 
this.displayBody.appendChild(newRow); 
} 
return newRow; //返回新行 
}, 
//取得所有行 
GetRows: function() { 
return this.displayBody.rows; 
}, 
//清空所有行 
Clear: function() { 
var newTbody = document.createElement("TBODY"); 
this.elmTable.replaceChild(newTbody, this.displayBody); 
this.displayBody = newTbody; 
}, 
//删除一行 
DeleteRow: function(row) { 
this.elmTable.deleteRow(row.rowIndex); 
if (row == this.activeRow) { 
this.activeRow = null; 
} 
}, 
//以下标为参数，删除一行 
DeleteAt: function(index) { 
this.displayBody.deleteRow(index); 
var rows = this.GetRows(); 
if (rows[index] == this.activeRow) { 
this.activeRow = null; 
} 
}, 
//添加一行 
AddRow: function(row) { 
this.displayBody.appendChild(row); 
}, 
onBinding: function(row) { }, 
// 数据绑定 
BindData: function(dataSource, mapList) { 
var _this = this; 
this.Clear(); 
this.repeater = new Repeater(); 
this.repeater.setMapList(mapList); 
this.repeater.defaultCreateItem = function() { 
var row = _this.NewRow(false); 
return row; 
}; 
this.repeater.setDataList(dataSource); 
this.repeater.setContainer(this.displayBody); 
this.repeater.Bind(); 
} 
};

使用示例代码： 
<!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 src="../JsLib/prototype.js" type="text/javascript"></script> 
<script src="../JsLib/prototype_ext.js" type="text/javascript"></script> 
<script src="../JsLib/Lib.js" type="text/javascript"></script> 
<!--库文件所必须的三个文件--> 
<script language="javascript" type="text/javascript"><!-- 
include("Table.js"); //头文件包含 
//数据 
var users = [{ user: "张三",sex:"M",age:20 }, 
{ user: "李四", sex: "F", age: 23 }, 
{ user: "王五", sex: "M", age: 22}]; 
//数据和模板的映射关系 
var mapList = [{ id: "tdName", field: "user" }, 
{ id: "sltSex", field: "sex" }, 
{ id: "tbAge", field: "age"}]; 
Lib.main = function() { //这是主函数 
var tblUser = new Table(); 
tblUser.BindID("tableUser"); //绑定到tableUser 
tblUser.SetOverChange(true); //鼠标经过时，行改变颜色 
tblUser.BindData(users, mapList); //绑定数据 
}; 
function View(btn) { 
var row = btn.parentNode.parentNode; //取得该行 
var data = row.data; //取得该行所绑定的数据 
alert(data.user + "\r\n" + data.sex + "\r\n" + data.age); 
} 
function Save(btn) { 
var row = btn.parentNode.parentNode; //取得该行 
var db = row.dataBinder; //取得该行的绑定器 
db.Save(); //保存该行 
//如果你想一次保存所有行的数据，请用tblUser的repeater.Save(); 
} 
// --></script> 
</head> 
<body> 
<table id="tableUser" border="1" width="400"> 
<thead><tr> 
<th>姓名</th> 
<th>性别</th> 
<th>年龄</th> 
<th>操作</th> 
</tr></thead> 
<tbody><tr> 
<td id="tdName"></td> 
<td> 
<select id="sltSex"> 
<option value="M">男</option> 
<option value="F">女</option> 
</select> 
</td> 
<td><input id="tbAge" type="text" size="4" /></td> 
<td><a href="javascript:;" onclick="Save(this)">保存</a> 
<a href="javascript:;" onclick="View(this)">查看</a></td> 
</tr></tbody> 
</table> 
</body> 
</html>

手动产生数据的例子，该例如果要实现以上动态编辑、数据保存的功能的话，则还要添加更多的代码才能实现，一般不推荐使用这种方法 
<!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 src="../JsLib/prototype.js" type="text/javascript"></script> 
<script src="../JsLib/prototype_ext.js" type="text/javascript"></script> 
<script src="../JsLib/Lib.js" type="text/javascript"></script> 
<!--库文件所必须的三个文件--> 
<script language="javascript" type="text/javascript"><!-- 
include("Table.js"); //头文件包含 
//数据 
var users = [{ user: "张三",sex:"M",age:20 }, 
{ user: "李四", sex: "F", age: 23 }, 
{ user: "王五", sex: "M", age: 22}]; 
Lib.main = function() { //这是主函数 
var tblUser = new Table(); 
tblUser.BindID("tableUser"); //绑定到tableUser 
tblUser.SetOverChange(true); //鼠标经过时，行改变颜色 
//手动生成数据 
for (var i = 0; i < users.length; i++) { 
var data = users[i]; 
var row = tblUser.NewRow(); //产生新行 
//设置各单元格数据 
row.cells["tdName"].innerHTML = data.user; 
row.cells["tdSex"].innerHTML = (data.sex == "M" ? "男" : "女"); 
row.cells["tdAge"].innerHTML = data.age; 
row.data = data; //设置data引用，以提供给View函数使用 
} 
}; 
function View(btn) { 
var row = btn.parentNode.parentNode; //取得该行 
var data = row.data; //取得该行所绑定的数据 
alert(data.user + "\r\n" + data.sex + "\r\n" + data.age); 
} 
// --></script> 
</head> 
<body> 
<table id="tableUser" border="1" width="400"> 
<thead><tr> 
<th>姓名</th> 
<th>性别</th> 
<th>年龄</th> 
<th>操作</th> 
</tr></thead> 
<tbody><tr> 
<td id="tdName"></td> 
<td id="tdSex"></td> 
<td id="tdAge"></td> 
<td><a href="javascript:;" onclick="View(this)">查看</a></td> 
</tr></tbody> 
</table> 
</body> 
</html>

动态表格Table类的实现

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jQuery之$(document).ready()使用介绍
Apr 05 Javascript
javascript中数组的concat()方法使用介绍
Dec 18 Javascript
jQuery提示效果代码分享
Nov 20 Javascript
jquery zTree异步加载、模糊搜索简单实例分享
Mar 24 Javascript
js中字符型和数值型数字的互相转化方法(必看)
Apr 25 Javascript
web.js.字符串与正则表达式操作
May 13 Javascript
详解vue嵌套路由-params传递参数
May 23 Javascript
小发现之浅谈location.search与location.hash的问题
Jun 23 Javascript
深入理解JavaScript 箭头函数
May 30 Javascript
JS实现贪吃蛇游戏
Nov 15 Javascript
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 jQuery
vue 项目@change多个参数传值多个事件的操作
Jan 29 Vue.js
javascript 函数调用规则
Aug 26 #Javascript
JSON 入门指南 想了解json的朋友可以看下
Aug 26 #Javascript
javascript 继承实现方法
Aug 26 #Javascript
JS去除字符串的空格增强版(可以去除中间的空格)
Aug 26 #Javascript
JavaScript 获取用户客户端操作系统版本
Aug 25 #Javascript
JS 获取span标签中的值的代码 支持ie与firefox
Aug 24 #Javascript
jquery 表单进行客户端验证demo
Aug 24 #Javascript
Docker(14) 守望先锋(1) 西索(1) 帝国时代(1) AngularJS(2) 城市猎人(1) explain(2) 波段(1) HAM-2000(1) 文书(291)
You might like
PHP中的float类型使用说明
2010/07/27 PHP
使用ob系列函数实现PHP网站页面静态化
2014/08/13 PHP
学习php设计模式 php实现策略模式(strategy)
2015/12/07 PHP
Joomla实现组件中弹出一个模式(modal)窗口的方法
2016/05/04 PHP
THINKPHP3.2使用soap连接webservice的解决方法
2017/12/13 PHP
windows系统下简单nodejs安装及环境配置
2013/01/08 NodeJs
javascript定时变换图片实例代码
2013/03/17 Javascript
jquery获取当前点击对象的value方法
2014/02/28 Javascript
javascript学习笔记（三）BOM和DOM详解
2014/09/30 Javascript
jquery复选框多选赋值给文本框的方法
2015/01/27 Javascript
响应式表格之固定表头的简单实现
2016/08/26 Javascript
angularjs中ng-attr的用法详解
2016/12/31 Javascript
使用watch监听路由变化和watch监听对象的实例
2018/02/24 Javascript
从0到1构建vueSSR项目之node以及vue-cli3的配置
2019/03/07 Javascript
详解微信小程序文件下载--视频和图片
2019/04/24 Javascript
js实现mp3录音通过websocket实时传送+简易波形图效果
2020/06/12 Javascript
[05:49]2014DOTA2TI4正赛第二日综述 昔日冠军纷纷落马 VG LGD占尽先机
2014/07/20 DOTA
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS OG
2018/03/30 DOTA
Python中的rfind()方法使用详解
2015/05/19 Python
python实现中文转换url编码的方法
2016/06/14 Python
Python 备份程序代码实现
2017/03/06 Python
Python爬虫实例_利用百度地图API批量获取城市所有的POI点
2018/01/10 Python
python2.6.6如何升级到python2.7.14
2018/04/08 Python
对python函数签名的方法详解
2019/01/22 Python
python 实现提取某个索引中某个时间段的数据方法
2019/02/01 Python
Python向excel中写入数据的方法
2019/05/05 Python
OpenCV图像颜色反转算法详解
2019/05/13 Python
通过python实现弹窗广告拦截过程详解
2019/07/10 Python
资生堂英国官网：Shiseido英国
2020/12/30 全球购物
高中的职业生涯规划书
2013/12/28 职场文书
演讲比赛获奖感言
2014/02/02 职场文书
房产公证书范本
2014/04/10 职场文书
经典的毕业生自荐信范文
2014/04/14 职场文书
社区党建工作方案
2014/06/10 职场文书
入党介绍人考察意见
2015/06/01 职场文书
一行代码python实现文件共享服务器
2021/04/22 Python