您的位置:首页 > Web前端 > JavaScript

用JS写的一个TableView控件

2010-01-23 19:50 423 查看
请看看编码是否规范,使用是否方便

HTML:

代码<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>输出结果为:

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: