用JS写的一个TableView控件代码
作者:bea
请看看编码是否规范,使用是否方便HTML: 代码 代码如下: <table id="customTableView"> <thead> <tr> <td>编号</td> <td>姓名</td> </tr> </thead> <tbody><!--template-tbody--> <tr name="" style="
请看看编码是否规范,使用是否方便
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>
输出结果为:
有用 | 无用
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>
输出结果为:
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- 起点页面传值js,有空研究学习下
- javascript 自动标记来自搜索结果页的关键字
- js 多层叠的TAB选项卡
- javascript 三种数组复制方法的性能对比
- javascript下一种表单元素获取方法存在的问题
- js 巧妙去除数组中的重复项
- javascript 删除数组中重复项(uniq)
- 将函数的实际参数转换成数组的方法
- jQuery中isFunction方法的BUG修复
- javascript中利用数组实现的循环队列代码
- document.getElementById为空或不是对象的解决方法
- JavaScript 未结束的字符串常量常见解决方法
- php gethostbyname获取域名ip地址函数详解
- setTimeout与setInterval在不同浏览器下的差异
- js 模拟实现类似c#下的hashtable的简单功能代码
- jQuery 1.4 15个你应该知道的新特性(译)
- 优化javascript的执行速度
- window.onbeforeunload方法在IE下无法正常工作的解决办法
- JQuery 1.4 中的Ajax问题