首页
所有分类
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插件分享
May 22 Javascript
jQuery获取样式中的背景颜色属性值/颜色值
Dec 17 Javascript
Jquery+asp.net后台数据传到前台js进行解析的方法
May 11 Javascript
JavaScript获取伪元素(Pseudo-Element)属性的方法技巧
Mar 13 Javascript
jQuery实现宽屏图片轮播实例教程
Nov 24 Javascript
Bootstrap每天必学之媒体对象
Nov 30 Javascript
vue生成随机验证码的示例代码
Sep 29 Javascript
移动web开发之touch事件实例详解
Jan 17 Javascript
详解JavaScript栈内存与堆内存
Apr 04 Javascript
vue组件内部引入外部js文件的方法
Jan 18 Javascript
基于JavaScript实现贪吃蛇游戏
Mar 16 Javascript
关于better-scroll插件的无法滑动bug(2021通过插件解决)
Mar 01 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
哥伦比亚购物网站(5) 泰国购物网站(30) 奥地利购物网站(28) 斯洛伐克购物网站(7) 土耳其购物网站(10) 葡萄牙购物网站(13) 波兰购物网站(52) 欧洲购物网站(15) 荷兰购物网站(99) 阿联酋购物网站(26)
You might like
php Undefined index和Undefined variable的解决方法
2008/03/27 PHP
Yii框架引用插件和ckeditor中body与P标签去除的方法
2017/01/19 PHP
javascript Excel操作知识点
2009/04/24 Javascript
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
2009/10/20 Javascript
在UpdatePanel内jquery easyui效果失效的解决方法
2010/04/11 Javascript
Ajax提交与传统表单提交的区别说明
2014/02/07 Javascript
js时间日期格式化封装函数
2014/12/02 Javascript
jQuery拖动布局其结果保存到数据库
2015/10/09 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
2016/01/26 Javascript
浅谈jquery中使用canvas的问题
2016/10/10 Javascript
jquery实现点击页面回到顶部
2016/11/23 Javascript
Node接收电子邮件的实例代码
2017/07/21 Javascript
将Sublime Text 3 添加到右键中的简单方法
2017/12/12 Javascript
微信小程序模板（template）使用详解
2018/01/31 Javascript
vue监听键盘事件的快捷方法【推荐】
2018/07/11 Javascript
python使用marshal模块序列化实例
2014/09/25 Python
使用Python的Twisted框架编写简单的网络客户端
2015/04/16 Python
Windows下Eclipse+PyDev配置Python+PyQt4开发环境
2016/05/17 Python
Django验证码的生成与使用示例
2017/05/20 Python
TensorFlow在MAC环境下的安装及环境搭建
2017/11/14 Python
Python实现列表删除重复元素的三种常用方法分析
2017/11/24 Python
Python利用turtle库绘制彩虹代码示例
2017/12/20 Python
numpy判断数值类型、过滤出数值型数据的方法
2018/06/09 Python
对pytorch网络层结构的数组化详解
2018/12/08 Python
python操作文件的参数整理
2019/06/11 Python
pandas DataFrame行或列的删除方法的实现示例
2019/08/02 Python
一行Python代码制作动态二维码的实现
2019/09/09 Python
使用anaconda安装pytorch的实现步骤
2020/09/03 Python
HTML5+CSS3实例 ：canvas 模拟实现电子彩票刮刮乐代码
2016/12/30 HTML / CSS
销售所有的狗狗产品：Dog.com
2016/10/13 全球购物
学校运动会广播稿范文
2014/10/02 职场文书
大学生社会实践活动总结报告
2015/05/06 职场文书
自我检讨书怎么写
2015/05/07 职场文书
三好学生评选事迹材料（2016精选版）
2016/02/25 职场文书
Java中CyclicBarrier和CountDownLatch的用法与区别
2021/08/23 Java/Android
Java中Dijkstra(迪杰斯特拉)算法
2022/05/20 Java/Android