用JS写的一个TableView控件代码


Posted in Javascript onJanuary 23, 2010

请看看编码是否规范,使用是否方便
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控件代码 
Javascript 相关文章推荐
JavaScript修改css样式style
Apr 15 Javascript
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
Nov 10 Javascript
js菜单点击显示或隐藏效果的简单实例
Jan 13 Javascript
script标签属性用type还是language
Jan 21 Javascript
JavaScript实现点击按钮就复制当前网址
Dec 14 Javascript
Javascript基础_标记文字的实现方法
Jun 14 Javascript
深入理解Vue transition源码分析
Jul 30 Javascript
JS实现获取进今年第几天是周几的方法分析
Jun 27 Javascript
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
Aug 24 Javascript
基于layui实现高级搜索(筛选)功能
Jul 26 Javascript
简单实现节流函数和防抖函数过程解析
Oct 08 Javascript
Quasar Input:type=&quot;number&quot; 去掉上下小箭头 实现加减按钮样式功能
Apr 09 Javascript
JQuery 操作Javascript对象和数组的工具函数小结
Jan 22 #Javascript
JavaScript 学习笔记(十四) 正则表达式
Jan 22 #Javascript
JQuery.uploadify 上传文件插件的使用详解 for ASP.NET
Jan 22 #Javascript
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
Jan 22 #Javascript
JQuery 构建客户/服务分离的链接模型中Table分页代码效率初探
Jan 22 #Javascript
被jQuery折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
Jan 22 #Javascript
jQuery 入门级学习笔记及源码
Jan 22 #Javascript
You might like
抓取YAHOO股票报价的类
2009/05/15 PHP
PHP+MySQL 制作简单的留言本
2009/11/02 PHP
php 各种应用乱码问题的解决方法
2010/05/09 PHP
PHP中imagick函数的中文解释
2015/01/21 PHP
php类自动装载、链式操作、魔术方法实现代码
2017/07/23 PHP
jquery文字上下滚动的实现方法
2013/03/22 Javascript
ExtJS4中的requires使用方法示例介绍
2013/12/03 Javascript
将数字转换成大写的人民币表达式的js函数
2014/09/21 Javascript
JavaScript检测弹出窗口是否已经关闭的方法
2015/03/24 Javascript
图解js图片轮播效果
2015/12/20 Javascript
jquery中ajax处理跨域的三大方式
2016/01/05 Javascript
浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
2016/01/19 Javascript
jQuery鼠标事件总结
2016/10/13 Javascript
vue 2.0路由之路由嵌套示例详解
2017/05/08 Javascript
JS实现的简单四则运算计算器功能示例
2017/09/27 Javascript
详解weex默认webpack.config.js改造
2018/01/08 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(上)
2018/04/18 Javascript
js实现简单选项卡功能
2020/03/23 Javascript
深入了解JavaScript 防抖和节流
2019/09/12 Javascript
公众号SVG动画交互实战代码
2020/05/31 Javascript
对pandas中apply函数的用法详解
2018/04/10 Python
python3+PyQt5实现自定义流体混合窗口部件
2018/04/24 Python
Python学习笔记基本数据结构之序列类型list tuple range用法分析
2019/06/08 Python
Django REST Framework序列化外键获取外键的值方法
2019/07/26 Python
python mock测试的示例
2020/10/19 Python
美国最大的无人机经销商:DroneNerds
2018/03/20 全球购物
JMS中Topic和Queue有什么区别
2013/05/15 面试题
毕业生医学检验求职信
2013/10/16 职场文书
小学毕业家长寄语
2014/01/19 职场文书
国家助学金获奖感言
2014/01/31 职场文书
《小猪家的桃花树》教学反思
2014/04/11 职场文书
2014年高数考试作弊检讨书
2014/12/14 职场文书
杨善洲电影观后感
2015/06/04 职场文书
大学同学聚会感言
2015/07/30 职场文书
2016先进工作者事迹材料
2016/02/25 职场文书
MySQL千万级数据表的优化实战记录
2021/08/04 MySQL