用JS寫(xiě)的一個(gè)TableView控件代碼
更新時(shí)間：2010年01月23日 23:29:08 作者：
JS寫(xiě)的一個(gè)TableView控件代碼，方便輸出表格。
請(qǐng)看看編碼是否規(guī)范，使用是否方便
HTML:
代碼
<table id="customTableView">
<thead>
<tr>
<td>編號(hào)</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>編號(hào)</td>
<td>名稱(chēng)</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 {
//構(gòu)造函數(shù)
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);
}
}
//}
//測(cè)試-1
var productDataSource = [["001","產(chǎn)品名稱(chēng)1"],["002","產(chǎn)品名稱(chēng)2"]];
var productTableView = new TableView("productTableView");
productTableView.bind(productDataSource);
//測(cè)試-2
var customDataSource = [["001","客戶(hù)姓名1"],["002","客戶(hù)姓名2"]];
var customTableView = new TableView("customTableView");
customTableView.bind(customDataSource);
</script>
輸出結(jié)果為：
HTML:
代碼
復(fù)制代碼 代碼如下:
<table id="customTableView">
<thead>
<tr>
<td>編號(hào)</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>編號(hào)</td>
<td>名稱(chēng)</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:
代碼
復(fù)制代碼 代碼如下:
<script type="text/javascript">
//class TableView {
//構(gòu)造函數(shù)
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);
}
}
//}
//測(cè)試-1
var productDataSource = [["001","產(chǎn)品名稱(chēng)1"],["002","產(chǎn)品名稱(chēng)2"]];
var productTableView = new TableView("productTableView");
productTableView.bind(productDataSource);
//測(cè)試-2
var customDataSource = [["001","客戶(hù)姓名1"],["002","客戶(hù)姓名2"]];
var customTableView = new TableView("customTableView");
customTableView.bind(customDataSource);
</script>
輸出結(jié)果為：
相關(guān)文章
JS實(shí)現(xiàn)瀏覽器菜單命令...2006-09-09
Web版彷 Visual Studio 2003 顏色選擇器
Web版彷 Visual Studio 2003 顏色選擇器...2007-01-01
JavaScript中獲得CheckBox狀態(tài)的方法小結(jié)
在 JavaScript 中,獲取復(fù)選框（CheckBox）的狀態(tài)（選中或未選中）可以通過(guò)以下幾種方式實(shí)現(xiàn),以下是具體方法及示例,并通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2025-03-03
JavaScript函數(shù)式編程(Functional Programming)高階函數(shù)(Higher order fun
這篇文章主要介紹了JavaScript函數(shù)式編程(Functional Programming)高階函數(shù)(Higher order functions),結(jié)合實(shí)例形式分析了javascript函數(shù)式編程高級(jí)函數(shù)的概念、原理、用法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-05-05
這篇文章主要介紹了JavaScript面向?qū)ο缶?需要的朋友可以參考下2017-09-09
JS中使用textPath實(shí)現(xiàn)線(xiàn)條上的文字
最近項(xiàng)目經(jīng)理交給我一下新項(xiàng)目，要實(shí)現(xiàn)關(guān)系圖，需要在線(xiàn)條上繪制文字。下面小編把使用textPath實(shí)現(xiàn)線(xiàn)條上的文字功能分享到腳本之家平臺(tái)供大家參考2017-12-12
ES6 迭代器(Iterator)和 for.of循環(huán)使用方法學(xué)習(xí)(總結(jié))
這篇文章主要介紹了ES6 迭代器(Iterator)和 for.of循環(huán)使用方法學(xué)習(xí)總結(jié),小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
gulp-uglify 與gulp.watch()配合使用時(shí)報(bào)錯(cuò)(重復(fù)壓縮問(wèn)題)
gulp是基于Nodejs的自動(dòng)任務(wù)運(yùn)行器，gulp 和 grunt 非常類(lèi)似，但相比于 grunt 的頻繁 IO 操作，gulp 的流操作，能更快地更便捷地完成構(gòu)建工作。今天在學(xué)習(xí)gulp時(shí)遇到當(dāng)用gulp.watch來(lái)監(jiān)聽(tīng)js文件的變動(dòng)時(shí)出現(xiàn)重復(fù)壓縮問(wèn)題，下面小編給大家解答下2016-08-08
這篇文章主要為大家詳細(xì)介紹了Openlayers實(shí)現(xiàn)圖形繪制，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
js 通過(guò)cookie實(shí)現(xiàn)刷新不變化樹(shù)形菜單
通過(guò)設(shè)置cookie來(lái)保存樹(shù)形菜單的狀態(tài)，在頁(yè)面加載時(shí)重新讀取cookie來(lái)設(shè)置菜單2014-10-10