首页
所有分类
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 相关文章推荐
asp.net下利用js实现返回上一页的实现方法小集
Nov 24 Javascript
提取jquery的ready()方法单独使用示例
Mar 25 Javascript
JS实现不规则TAB选项卡效果代码
Sep 16 Javascript
[原创]JQuery 在表单提交之前修改 提交的值
Apr 14 Javascript
网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法
Nov 24 Javascript
如何编写一个d.ts文件的步骤详解
Apr 13 Javascript
使用javascript做在线算法编程
May 25 Javascript
Vue axios设置访问基础路径方法
Sep 19 Javascript
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
Jun 17 Javascript
Jquery动态列功能完整实例
Aug 30 jQuery
解决layui的radio属性或别的属性没显示出来的问题
Sep 26 Javascript
JavaScript ECMA-262-3 深入解析（一）：执行上下文实例分析
Apr 25 Javascript
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
self(1) SpringBoot(22) pyqt5(3) Qlabel(1) JSON(10) Normal From(1) MapReduce(1) css3 (2) capture(1) MybatisPlus(2)
You might like
PHP用户指南-cookies部分
2006/10/09 PHP
兼容性最强的PHP生成缩略图的函数代码(修改版)
2011/01/18 PHP
将时间以距今多久的形式表示,PHP,js双版本
2012/09/25 PHP
PHP使用Curl实现模拟登录及抓取数据功能示例
2018/04/27 PHP
PHP反射原理与用法深入分析
2019/09/28 PHP
ExtJS 简介 让你知道extjs是什么
2008/12/29 Javascript
快速获取/设置iframe内对象元素的几种js实现方法
2016/05/20 Javascript
微信小程序 地图（map）实例详解
2016/11/16 Javascript
Javascript实现基本运算器
2017/07/15 Javascript
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
2018/03/14 Javascript
Vue表单及表单绑定方法
2018/09/04 Javascript
Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结
2019/02/11 Javascript
JS 实现发送短信验证码的“59秒后重新发送验证短信”功能
2019/08/23 Javascript
vue 更改连接后台的api示例
2019/11/11 Javascript
[01:33:30]DOTA2-DPC中国联赛 正赛 RNG vs Phoenix BO3 第二场 2月5日
2021/03/11 DOTA
python中self原理实例分析
2015/04/30 Python
Python基础学习之常见的内建函数整理
2017/09/06 Python
使用tensorflow实现AlexNet
2017/11/20 Python
Django ManyToManyField 跨越中间表查询的方法
2018/12/18 Python
pyqt 实现在Widgets中显示图片和文字的方法
2019/06/13 Python
PyCharm 配置远程python解释器和在本地修改服务器代码
2019/07/23 Python
Python语法垃圾回收机制原理解析
2020/03/25 Python
jupyter notebook 调用环境中的Keras或者pytorch教程
2020/04/14 Python
基于nexus3配置Python仓库过程详解
2020/06/15 Python
HTML5中的postMessage API基本使用教程
2016/05/20 HTML / CSS
意大利奢侈品购物网站：Giglio
2018/01/05 全球购物
豪华床上用品 ：Jennifer Adams
2019/09/15 全球购物
工程师岗位职责
2013/11/08 职场文书
大学本科毕业生求职信范文
2013/12/18 职场文书
安全生产检查通报
2014/01/29 职场文书
企业申诉管理制度
2014/01/30 职场文书
幼儿园运动会入场词
2014/02/10 职场文书
租房协议书
2014/04/10 职场文书
先进个人总结范文
2015/02/15 职场文书
运动会开幕式致辞
2015/07/29 职场文书
vue实力踩坑之push当前页无效
2022/04/10 Vue.js