首页
所有分类
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学习笔记（十七）js 优化
Feb 04 Javascript
现代 JavaScript 开发编程风格Idiomatic.js指南中文版
May 28 Javascript
CSS3实现动态背景登录框的代码
Jul 28 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
Aug 21 Javascript
原生js实现百叶窗效果及原理介绍
Apr 12 Javascript
网站申请不到支付宝接口、微信接口，免接口收款实现方式几种解决办法
Dec 14 Javascript
vue数据双向绑定原理解析（get &amp; set)
Mar 08 Javascript
js/jq仿window文件夹框选操作插件
Mar 08 Javascript
js事件委托和事件代理案例分享
Jul 25 Javascript
微信小程序制作表格的方法
Feb 14 Javascript
JavaScript模块管理的简单实现方式详解
Jun 15 Javascript
浅谈vue3中effect与computed的亲密关系
Oct 10 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) pdf(1) 延时任务(1) openGauss(1) ant design(2) Eclipse(1) 太阳码(1) 变量提升(1) 弹窗(1) JDBC(3)
You might like
全国FM电台频率大全 - 22 重庆市
2020/03/11 无线电
使用PHP维护文件系统
2006/10/09 PHP
PHP Parse Error: syntax error, unexpected $end 错误的解决办法
2012/06/05 PHP
ThinkPHP无限级分类原理实现留言与回复功能实例
2014/10/31 PHP
php抽象类用法实例分析
2015/07/07 PHP
thinkphp框架下实现登录、注册、找回密码功能
2016/04/06 PHP
初学js插入节点appendChild insertBefore使用方法
2011/07/04 Javascript
基于jquery的放大镜效果
2012/05/30 Javascript
js取float型小数点后两位数的方法
2014/01/18 Javascript
jQuery事件用法实例汇总
2014/08/29 Javascript
编写高性能Javascript代码的N条建议
2015/10/12 Javascript
jQuery bt气泡实现悬停显示及移开隐藏功能的方法
2016/07/12 Javascript
jQuery实现产品对比功能附源码下载
2016/08/09 Javascript
JS简单设置下拉选择框默认值的方法
2016/08/20 Javascript
归纳下js面向对象的几种常见写法总结
2016/08/24 Javascript
JS实现六边形3D拖拽翻转效果的方法
2016/09/11 Javascript
jquery.form.js异步提交表单详解
2017/04/25 jQuery
jQuery查找和过滤_动力节点节点Java学院整理
2017/07/04 jQuery
vue.js移动端app实战1：初始配置详解
2017/07/24 Javascript
iview日期控件,双向绑定日期格式的方法
2018/03/15 Javascript
微信小程序上传图片实例
2018/05/28 Javascript
点击按钮弹出模态框的一系列操作代码实例
2019/03/29 Javascript
Vue使用localStorage存储数据的方法
2019/05/27 Javascript
Vue项目环境搭建详细总结
2019/09/26 Javascript
基于node+vue实现简单的WebSocket聊天功能
2020/02/01 Javascript
vue+ESLint 配置保存 自动格式化代码
2020/03/17 Javascript
解决vue单页面应用进入页面加载所有 js 的问题
2020/08/12 Javascript
简单了解什么是神经网络
2017/12/23 Python
Python操作MongoDB数据库的方法示例
2018/01/04 Python
python基础教程项目五之虚拟茶话会
2018/04/02 Python
一百行python代码将图片转成字符画
2021/02/19 Python
Python 硬币兑换问题
2019/07/29 Python
莫斯科购买书籍网站：Book24
2020/01/12 全球购物
经理管理专业自荐信范文
2013/12/31 职场文书
单位未婚证明范本
2014/01/18 职场文书
golang判断key是否在map中的代码
2021/04/24 Golang