|
|
HTML:
代碼
復制代碼 代碼如下:
<table id="customTableView">
<thead>
<tr>
<td>編號</td>
<td>姓名</td>
</tr>
</thead>
<tbody><!--template-tbody-->
<tr name="" style=" display:none"><!--template-tr-->
<td bind="0"><span class="red">{value}</span></td>
<td bind="1"><strong>{value}</strong></td>
</tr>
</tbody>
</table>
<hr />
<table id="productTableView">
<thead>
<tr>
<td>編號</td>
<td>名稱</td>
</tr>
</thead>
<tbody>
<tr style=" display:none">
<td bind="0"><span class="red">{value}</span></td>
<td bind="1"><strong>{value}</strong></td>
</tr>
</tbody>
</table>
Javascript:
代碼
復制代碼 代碼如下:
<script type="text/Javascript">
//class TableView {
//構造函數
function TableView(ID){
var htmlTable = document.getElementById(ID);
this.container = htmlTable.getElementsByTagName("tbody")[0];
this.template = this.container.getElementsByTagName("tr")[0];
}
//成員方法
TableView.prototype.bind = function(dataSource) {
var template = this.template;
var container = this.container;
for(var k=0; k<dataSource.length; k++) {
var newRow = template.cloneNode(true);
newRow.removeAttribute("id");
newRow.removeAttribute("style");
for(var i=0;i<2;i++) {
var dataItem = newRow.cells[i];
dataItem.innerHTML = dataItem.innerHTML.replace("{value}", dataSource[k][dataItem.getAttribute("bind")]);
}
container.appendChild(newRow);
}
}
//}
//測試-1
var productDataSource = [["001","產品名稱1"],["002","產品名稱2"]];
var productTableView = new TableView("productTableView");
productTableView.bind(productDataSource);
//測試-2
var customDataSource = [["001","客戶姓名1"],["002","客戶姓名2"]];
var customTableView = new TableView("customTableView");
customTableView.bind(customDataSource);
</script>
輸出結果為：
JavaScript技術：用JS寫的一個TableView控件代碼，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
