用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 相关文章推荐
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
Mar 25 Javascript
JavaScript实现存储HTML字符串示例
Apr 21 Javascript
jQuery插件分享之分页插件jqPagination
Jun 06 Javascript
jquery中页面Ajax方法$.load的功能使用介绍
Oct 20 Javascript
jQuery制作简单柱状图实例
Jan 28 Javascript
js光标定位文本框回车表单提交问题的解决方法
May 11 Javascript
javascript与jquery中的this关键字用法实例分析
Dec 24 Javascript
js类式继承与原型式继承详解
Apr 07 Javascript
js实现自定义进度条效果
Mar 15 Javascript
AngularJS 实现点击按钮获取验证码功能实例代码
Jul 13 Javascript
JS实现百度搜索接口及链接功能实例代码
Feb 02 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
Sep 05 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
php下连接ftp实现文件的上传、下载、删除文件实例代码
2010/06/03 PHP
Zend Framework教程之模型Model用法简单实例
2016/03/04 PHP
PHP动态地创建属性和方法, 对象的复制, 对象的比较,加载指定的文件,自动加载类文件,命名空间
2016/05/06 PHP
php+ajax实现带进度条的上传图片功能【附demo源码下载】
2016/09/14 PHP
jquery中获得$.ajax()事件返回的值并添加事件的方法
2010/04/15 Javascript
用JS提交参数创建form表单在FireFox中遇到的问题
2013/01/16 Javascript
jquery中子元素和后代元素的区别示例介绍
2014/04/02 Javascript
JavaScript插件化开发教程(五)
2015/02/01 Javascript
jQuery经过一段时间自动隐藏指定元素的方法
2015/03/17 Javascript
JS响应鼠标点击实现两个滑块区间拖动效果
2015/10/26 Javascript
使用jquery提交form表单并自定义action的实现代码
2016/05/25 Javascript
Javascript中的async awai的用法
2017/05/17 Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
2017/09/02 Javascript
JavaScript中set与get方法用法示例
2018/08/15 Javascript
实例详解vue.js浅度监听和深度监听及watch用法
2018/08/16 Javascript
Typescript的三种运行方式(小结)
2019/09/18 Javascript
微信小程序使用echarts获取数据并生成折线图
2019/10/16 Javascript
JavaScript实现移动端带transition动画的轮播效果
2020/03/24 Javascript
[01:34]DOTA2 7.22版本新增神杖效果一览(敏捷英雄篇)
2019/05/28 DOTA
30分钟搭建Python的Flask框架并在上面编写第一个应用
2015/03/30 Python
各个系统下的Python解释器相关安装方法
2015/10/12 Python
Python中多线程的创建及基本调用方法
2016/07/08 Python
用Python解决计数原理问题的方法
2016/08/04 Python
Python实现读取字符串按列分配后按行输出示例
2018/04/17 Python
浅谈python 中类属性共享的问题
2019/07/02 Python
Pycharm导入anaconda环境的教程图解
2020/07/31 Python
详解Python3 定义一个跨越多行的字符串的多种方法
2020/09/06 Python
用gpu训练好的神经网络,用tensorflow-cpu跑出错的原因及解决方案
2021/03/03 Python
HTML5新增form控件和表单属性实例代码详解
2019/05/15 HTML / CSS
C#中有没有静态构造函数,如果有是做什么用的?
2016/06/04 面试题
从严治党主题教育活动总结
2015/05/07 职场文书
2019年入党思想汇报
2019/03/25 职场文书
HR必备:销售经理聘用合同范本
2019/08/21 职场文书
分布式锁为什么要选择Zookeeper而不是Redis?看完这篇你就明白了
2021/05/21 Redis
Python趣味实战之手把手教你实现举牌小人生成器
2021/06/07 Python
Django实现drf搜索过滤和排序过滤
2021/06/21 Python