javascript实现动态表格Table类

微博文章来源:网络整理本站编辑:兰特

文件名：Table.js本文件依赖于 prototype.js,prototype_ext.js,Lib.js,DataBinder.js这些文件请查询相关资料

/// <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"
"">
<html xmlns="">
<head>
<title></title>

<script src="../JsLib/prototype.js" type="text/"></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"></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"
"">
<html xmlns="">
<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"></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>

奇异新闻网|对错网|海鸟网