首页
所有分类
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 相关文章推荐
javascript 播放器 控制
Jan 22 Javascript
jQuery 性能优化指南（2）
May 21 Javascript
javascript获取form里的表单元素的示例代码
Feb 14 Javascript
JavaScript操作Cookie详解
Feb 28 Javascript
深入理解JavaScript系列（47）：对象创建模式（上篇）
Mar 04 Javascript
JavaScript知识点总结(十一)之js中的Object类详解
May 31 Javascript
详解vue与后端数据交互(ajax)：vue-resource
Mar 16 Javascript
ionic2屏幕适配实现适配手机、平板等设备的示例代码
Aug 11 Javascript
jquery的 filter()方法使用教程
Mar 22 jQuery
vue.js使用v-model指令实现的数据双向绑定功能示例
May 22 Javascript
浅谈Webpack核心模块tapable解析
Sep 11 Javascript
JS事件绑定的常用方式实例总结
Mar 02 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
cypress(1) 太阳码(1) ant design(2) 延时任务(1) 变量提升(1) pdf(1) 弹窗(1) JDBC(3) Eclipse(1) openGauss(1)
You might like
php数组函数序列之array_pop() - 删除数组中的最后一个元素
2011/11/07 PHP
解析php类的注册与自动加载
2013/07/05 PHP
PHP判断上传文件类型的解决办法
2015/10/20 PHP
java微信开发之上传下载多媒体文件
2016/06/24 PHP
php实现数字补零的方法总结
2018/09/12 PHP
PHP实现与java 通信的插件使用教程
2019/08/11 PHP
JavaScript 对象、函数和继承
2009/07/07 Javascript
用javascript实现自动输出网页文本
2015/07/30 Javascript
jQuery+jsp下拉框联动获取本地数据的方法(附源码)
2015/12/03 Javascript
jQuery控制frames及frame页面JS的方法
2016/03/08 Javascript
JavaScript的Backbone.js框架环境搭建及Hellow world示例
2016/05/07 Javascript
js实现的简单图片浮动效果完整实例
2016/05/10 Javascript
DIV+CSS+jQ实现省市联动可扩展
2016/06/22 Javascript
json对象与数组以及转换成js对象的简单实现方法
2016/06/24 Javascript
angularjs实现文字上下无缝滚动特效代码
2016/09/04 Javascript
vue3弹出层V3Popup实例详解
2021/01/04 Vue.js
[01:04:31]DOTA2-DPC中国联赛定级赛 iG vs Magma BO3第二场 1月8日
2021/03/11 DOTA
编写Python脚本来获取mp3文件tag信息的教程
2015/05/04 Python
python如何通过twisted实现数据库异步插入
2018/03/20 Python
python的内存管理和垃圾回收机制详解
2019/05/18 Python
调试Django时打印SQL语句的日志代码实例
2019/09/12 Python
Python实现子类调用父类的初始化实例
2020/03/12 Python
Python操作MySQL数据库的示例代码
2020/07/13 Python
Django返回HTML文件的实现方法
2020/09/17 Python
Ray-Ban雷朋美国官网：全球领先的太阳眼镜品牌
2016/07/20 全球购物
全球精选男装和家居用品：Article
2020/04/13 全球购物
大学生年度自我鉴定
2013/10/31 职场文书
2014年机关党建工作总结
2014/11/11 职场文书
商务邀请函
2015/01/30 职场文书
2015年毕业生个人自荐书
2015/03/24 职场文书
元旦晚会主持词开场白
2015/05/28 职场文书
干货!开幕词的写作方法
2019/04/02 职场文书
python 下载文件的几种方式分享
2021/04/07 Python
OpenCV实现反阈值二值化
2021/11/17 Java/Android
MySQL为数据表建立索引的原则详解
2022/03/03 MySQL
Java字符串逆序方法详情
2022/03/21 Java/Android