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