用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动态改变图片IMG的src地址示例
Jun 25 Javascript
Ajax请求在数据量大的时候出现超时的解决方法
Feb 27 Javascript
jQuery中animate用法实例分析
Mar 09 Javascript
jQuery插件jRumble实现网页元素抖动
Jun 05 Javascript
Easyui Treegrid改变默认图标的方法
Apr 29 Javascript
带你了解session和cookie作用原理区别和用法
Aug 14 Javascript
Vue入门之数量加减运算操作示例
Dec 11 Javascript
vue eslint简要配置教程详解
Jul 26 Javascript
vue从一个页面跳转到另一个页面并携带参数的解决方法
Aug 12 Javascript
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
Aug 20 Javascript
在vue中利用v-html按分号将文本换行的例子
Nov 14 Javascript
详解vue路由
Aug 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
我常用的几个类
2006/10/09 PHP
PHP+Mysql日期时间如何转换(UNIX时间戳和格式化日期)
2012/07/15 PHP
THINKPHP2.0到3.0有哪些改进之处
2015/01/04 PHP
Yii针对添加行的增删改查操作示例
2016/10/18 PHP
接收键盘指令的脚本
2006/06/26 Javascript
JS打开图片另存为对话框实现代码
2012/12/26 Javascript
Jquery加载时从后台读取数据绑定到dropdownList实例
2013/06/09 Javascript
jquery选择器之内容过滤选择器详解
2014/01/27 Javascript
jQuery的:parent选择器定义和用法
2014/07/01 Javascript
js和jquery中循环的退出和继续下一个循环
2014/09/03 Javascript
12306验证码破解思路分享
2015/03/25 Javascript
jQuery基于ajax实现带动画效果无刷新柱状图投票代码
2015/08/10 Javascript
对Angular.js Controller如何进行单元测试
2016/10/25 Javascript
你不知道的 javascript【推荐】
2017/01/08 Javascript
jquery ajax异步提交表单数据的方法
2017/10/27 jQuery
vue路由组件按需加载的几种方法小结
2018/07/12 Javascript
详解js模板引擎art template数组渲染的方法
2018/10/09 Javascript
在React项目中使用Eslint代码检查工具及常见问题
2018/10/10 Javascript
java实现单链表增删改查的实例代码详解
2019/08/30 Javascript
[04:27]DOTA2官方论坛水友赛集锦
2013/09/16 DOTA
urllib2自定义opener详解
2014/02/07 Python
浅析Python中return和finally共同挖的坑
2017/08/18 Python
python爬虫_微信公众号推送信息爬取的实例
2017/10/23 Python
Python requests发送post请求的一些疑点
2018/05/20 Python
python中的json总结
2018/10/11 Python
Python文件监听工具pyinotify与watchdog实例
2018/10/15 Python
python pygame模块编写飞机大战
2018/11/20 Python
python挖矿算力测试程序详解
2019/07/03 Python
Python多重继承之菱形继承的实例详解
2020/02/12 Python
解决pyecharts运行后产生的html文件用浏览器打开空白
2020/03/11 Python
python多进程 主进程和子进程间共享和不共享全局变量实例
2020/04/25 Python
Python jieba结巴分词原理及用法解析
2020/11/05 Python
用你熟悉的语言写一个连接ORACLE数据库的程序,能够完成修改和查询工作
2012/06/11 面试题
幼儿园中班开学寄语
2014/04/03 职场文书
祖国在我心中演讲稿200字
2014/08/28 职场文书
上课玩手机的检讨书
2014/10/01 职场文书