 
<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>名稱</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)品名稱1"],["002","產(chǎn)品名稱2"]]; 
var productTableView = new TableView("productTableView"); 
productTableView.bind(productDataSource); 
//測(cè)試-2 
var customDataSource = [["001","客戶姓名1"],["002","客戶姓名2"]]; 
var customTableView = new TableView("customTableView"); 
customTableView.bind(customDataSource); 
</script> 

輸出結(jié)果為：

您可能感興趣的文章:

JS
TableView

相關(guān)文章

微信小程序仿通訊錄功能
這篇文章主要為大家詳細(xì)介紹了微信小程序仿通訊錄功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-04-04
node.js+express+mySQL+ejs+bootstrop實(shí)現(xiàn)網(wǎng)站登錄注冊(cè)功能
這篇文章主要介紹了node.js+express+mySQL+ejs+bootstrop實(shí)現(xiàn)網(wǎng)站登錄注冊(cè)功能，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下
2018-01-01
JavaScript定時(shí)器原理詳解
這篇文章主要介紹了JavaScript定時(shí)器原理,setTimeout()方法用于設(shè)置一個(gè)定時(shí)器，該定時(shí)器在定時(shí)器到期后執(zhí)行調(diào)用函數(shù),文章圍繞JavaScript定時(shí)器相關(guān)資料展開以下內(nèi)容,需要的朋友可以參考一下
2021-12-12
uni-app中onBackPress()監(jiān)聽頁(yè)面返回(更新數(shù)據(jù))
這篇文章主要給大家介紹了關(guān)于uni-app中onBackPress()監(jiān)聽頁(yè)面返回(更新數(shù)據(jù))的相關(guān)資料,在UniApp中,可以通過監(jiān)聽頁(yè)面刷新的生命周期函數(shù)來(lái)監(jiān)聽頁(yè)面的返回,然后重新調(diào)用接口進(jìn)行刷新,需要的朋友可以參考下
2023-10-10
微信小程序配置視圖層數(shù)據(jù)綁定相關(guān)示例
這篇文章主要為大家介紹了微信小程序配置視圖層數(shù)據(jù)綁定相關(guān)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步早日升職加薪<BR>
2022-04-04
JavaScript實(shí)現(xiàn)簡(jiǎn)單圖片滾動(dòng)附源碼下載
JavaScript實(shí)現(xiàn)簡(jiǎn)單圖片滾動(dòng)，9張圖告訴你，C羅欲哭無(wú)淚，另附源碼下載，方便學(xué)習(xí)
2014-06-06
JS原形與原型鏈深入詳解
這篇文章主要介紹了JS原形與原型鏈,結(jié)合實(shí)例形式深入分析了JS原型鏈、繼承、組合繼承等相關(guān)原理、操作技巧及注意事項(xiàng),需要的朋友可以參考下
2020-05-05
JS實(shí)現(xiàn)的簡(jiǎn)單tab切換功能完整示例
這篇文章主要介紹了JS實(shí)現(xiàn)的簡(jiǎn)單tab切換功能,結(jié)合完整實(shí)例形式分析了javascript基于事件響應(yīng)實(shí)現(xiàn)頁(yè)面元素屬性動(dòng)態(tài)變換相關(guān)操作技巧,需要的朋友可以參考下
2019-06-06
JS判斷元素為數(shù)字的奇異寫法分享
JS判斷元素為數(shù)字的奇異寫法分享，需要的朋友可以參考下
2012-08-08
ECMAScript6變量的解構(gòu)賦值實(shí)例詳解
ES6允許按照一定模式，從數(shù)組和對(duì)象中提取值，對(duì)變量進(jìn)行賦值，這被稱為解構(gòu)（Destructuring），下文中給大家提供了嵌套數(shù)組的解構(gòu)例子，大家一起看看吧
2017-09-09