動的テーブル Table class_prototype の実装

コードをコピー コードは次のとおりです:

///
/// //DataBinder.js の紹介
include("DataBinder.js");
/*
/th>


tbody>

*/
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); ) null を返します;
while (elm.tagName.toLowerCase() != "tr ") {
elm = elm.parentNode;
if (elm == this.elmTable || elm == null) return null;
}
if (elm.parentNode != this.displayBody ) return null;
//マウスが上に移動したときのイベント応答
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 =
var newRow = this.templetRow.cloneNode(true); //テンプレート行のディープコピーを作成します
newRow.backgroundColor = newRow.style.backgroundColor
//テーブル表示領域に追加します
if ( bAdd == true || bAdd == null) {
this.displayBody.appendChild(newRow);
return newRow
},
//Get all rows
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 =
}
} ,
//添字は行を削除するパラメータです
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.repeater = new Replyer(); 🎜>this.repeater.setMapList(mapList);
this.repeater.defaultCreateItem = function() {
var row = _this.NewRow(false);
; >this.repeater.setDataList(dataSource);
this.repeater.setContainer(this.displayBody);
}

サンプル コードを使用します:




コードをコピー

コードは次のとおりです。

< !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"> <--ファイルの場所 3 つの必要なファイル -->

../JsLib/prototype_ext.js" type="text/javascript">

名前
性別
gt;年齢
操作




男性
女性


保存
表示
;




上記の動的編集を実装する場合は、さらに詳しく説明します。これを実現するにはコードを追加する必要があります。この方法は通常推奨されません




コードをコピー


コードは次のとおりです:

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional .dtd">




🎜>






名前
性別
gt;年齢
<番目> 操作


tdName">


< td>