用JS写的一个TableView控件代码
2010-01-23 00:00
661 查看
请看看编码是否规范,使用是否方便
HTML:
代码
Javascript:
代码
输出结果为:
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写的一个TableView控件代码
- 用JS写的一个TableView控件
- 用JS写的一个TableView控件
- iOS开发:代码通用性以及其规范 第二篇(猜想iOS中实现TableView内部设计思路(附代码),以类似的思想实现一个通用的进度条)
- 多表-连表筛选代码(其中一个view有两个表格tableView)
- (javascript)一个时间选取控件的js代码(转载)
- GridView其实是一个table,这里使用js循环table,代码如下:
- android 一个很漂亮的控件ObservableScrollView(含片段代码和源码)
- JS代码,将终端用户(Web 页面的查看者)的计算机时间置于一个按钮 Web 服务器控件上
- 【代码笔记】iOS-一个tableView,两个section
- 【代码笔记】iOS-一个tableView,两个section
- Swift实现的一个tableView可用的下拉刷新控件(自定义UIControl)
- 一个简单的JS时间控件示例代码(JS时分秒时间控件)
- 在 Table View 中显示一个刷新控件
- 动态tableView中通过点击tableViewCell内部的一个控件找到indexPath
- 不用xib文件,直接用代码实现xib。实现一个toolbar,tableview,具体如效果图
- 一个用js实现控制台控件的代码
- 一个用js实现控制台控件的代码
- tableview索引添加一个显示点击或滑动到哪个字母的控件
- 一个简单的JS时间控件示例代码(JS时分秒时间控件)