用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 相关文章推荐
比较简单的一个符合web标准的JS调用flash方法
Nov 29 Javascript
浅谈javascript 面向对象编程
Oct 28 Javascript
js URL参数的拼接方法比较
Feb 15 Javascript
JavaScript 验证码的实例代码(附效果图)
Mar 22 Javascript
防止浏览器记住用户名及密码的简单实用方法
Apr 22 Javascript
Javascript实现滚动图片新闻的实例代码
Nov 27 Javascript
理运用命名空间让js不产生冲突避免全局变量的泛滥
Jun 15 Javascript
jQuery中trigger()方法用法实例
Jan 19 Javascript
js获得当前系统日期时间的方法
May 06 Javascript
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
Jul 21 Javascript
Jquery cookie插件实现原理代码解析
Aug 04 jQuery
关于Node.js中频繁修改代码重启服务器的问题
Oct 15 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中使用curl_init函数的说明
2010/11/02 PHP
PHP对象转换为数组函数(递归方法)
2012/02/04 PHP
PHP数组排序函数合集 以及它们之间的联系分析
2013/06/27 PHP
有关于PHP中常见数据类型的汇总分享
2014/01/06 PHP
php及codeigniter使用session-cookie的方法(详解)
2017/04/06 PHP
PHP基于递归实现的约瑟夫环算法示例
2017/08/27 PHP
php 可变函数使用小结
2018/06/12 PHP
jQuery ajax dataType值为text json探索分享
2013/09/23 Javascript
js实现百度联盟中一款不错的图片切换效果完整实例
2015/03/04 Javascript
JavaScript使用concat连接数组的方法
2015/04/06 Javascript
JavaScript中toString()方法的使用详解
2015/06/05 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
2016/06/30 Javascript
Angular2 (RC5) 路由与导航详解
2016/09/21 Javascript
使用BootStrapValidator完成前端输入验证
2016/09/28 Javascript
JavaScript实现QQ列表展开收缩扩展功能
2017/10/30 Javascript
深入理解 Koa 框架中间件原理
2018/10/18 Javascript
js操作table中tr的顺序实现上移下移一行的效果
2018/11/22 Javascript
微信小程序去除左上角返回键的实现方法
2020/03/06 Javascript
vue单应用在ios系统中实现微信分享功能操作
2020/09/07 Javascript
使用Python对SQLite数据库操作
2017/04/06 Python
详解Python list 与 NumPy.ndarry 切片之间的对比
2017/07/24 Python
tensorflow 打印内存中的变量方法
2018/07/30 Python
解决python 无法加载downsample模型的问题
2018/10/25 Python
对pandas中两种数据类型Series和DataFrame的区别详解
2018/11/12 Python
Python模块 _winreg操作注册表
2020/02/05 Python
Python使用pyexecjs代码案例解析
2020/07/13 Python
HTML5 manifest离线缓存的示例代码
2018/08/08 HTML / CSS
PHP使用Redis队列执行定时任务实例讲解
2021/03/24 PHP
毕业设计计划书
2014/01/09 职场文书
新手上路标语
2014/06/20 职场文书
学习实践科学发展观心得体会
2014/09/10 职场文书
无房证明范本
2014/09/17 职场文书
幼儿园教师考核评语
2014/12/31 职场文书
雾霾停课通知
2015/04/24 职场文书
深度好文:50条没人告诉你的人生经验,句句精辟
2019/08/22 职场文书
详解CSS玩转图片Base64编码
2021/05/25 HTML / CSS