代碼如下:
/// <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) {