用JS写的一个TableView控件代码

　　<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>

　　<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>