动态表格动态表格Table类的实现类的实现
代码如下:
/// <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;
资源评论
