用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 设置标题的自动翻转
Oct 03 Javascript
IE 上下滚动展示模仿Marquee机制
Dec 20 Javascript
异步javascript的原理和实现技巧介绍
Nov 08 Javascript
JavaScript中的console.dir()函数介绍
Dec 29 Javascript
EasyUI中datagrid在ie下reload失败解决方案
Mar 09 Javascript
jQuery动态添加可拖动元素完整实例(附demo源码下载)
Jun 21 Javascript
微信公众号 摇一摇周边功能开发
Dec 08 Javascript
详解nuxt sass全局变量(公共scss解决方案)
Jun 27 Javascript
angular6.0使用教程之父组件通过url传递id给子组件的方法
Jun 30 Javascript
vue组件之间通信实例总结(点赞功能)
Dec 05 Javascript
JS原型和原型链原理与用法实例详解
Feb 05 Javascript
通过实例解析vuejs如何实现调试代码
Jul 16 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系统命令函数使用分析
2013/07/05 PHP
PHP中is_dir()函数使用指南
2015/05/08 PHP
php显示时间常用方法小结
2015/06/05 PHP
PHP下载生成的csv文件及问题总结
2015/08/06 PHP
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
firefox 和 ie 事件处理的细节,研究,再研究 书写同时兼容ie和ff的事件处理代码
2007/04/12 Javascript
jquery HotKeys轻松搞定键盘事件代码
2008/08/30 Javascript
始终在屏幕中间显示Div的代码(css+js)
2011/03/10 Javascript
以JSON形式将JS中Array对象数组传至后台的方法
2014/01/06 Javascript
JavaScript实现的一个倒计时的类
2015/03/12 Javascript
AngularJs Understanding the Controller Component
2016/09/02 Javascript
jquery.tableSort.js表格排序插件使用方法详解
2020/08/12 Javascript
快速理解 JavaScript 中的 LHS 和 RHS 查询的用法
2017/08/24 Javascript
微信小程序实现顶部普通选项卡效果(非swiper)
2020/06/19 Javascript
js 判断一个数字是不是2的n次方幂的实例
2017/11/26 Javascript
看看“疫苗查询”小程序有温度的代码
2018/07/31 Javascript
在Vuex使用dispatch和commit来调用mutations的区别详解
2018/09/18 Javascript
小程序实现左右来回滚动字幕效果
2018/12/28 Javascript
vue+vuex+json-seiver实现数据展示+分页功能
2019/04/11 Javascript
如何利用vue+vue-router+elementUI实现简易通讯录
2019/05/13 Javascript
Vue 使用Props属性实现父子组件的动态传值详解
2019/11/13 Javascript
Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
2020/09/10 Javascript
Flexible.js可伸缩布局实现方法详解
2020/11/13 Javascript
[05:04]完美世界携手游戏风云打造 卡尔工作室地图界面篇
2013/04/23 DOTA
Python入门篇之数字
2014/10/20 Python
15行Python代码实现网易云热门歌单实例教程
2019/03/10 Python
python判断链表是否有环的实例代码
2020/01/31 Python
Python Flask框架实现简单加法工具过程解析
2020/06/03 Python
SpringBoot首页设置解析(推荐)
2021/02/11 Python
初三政治教学反思
2014/01/30 职场文书
《和我们一样享受春天》教学反思
2014/02/07 职场文书
资金主管岗位职责范本
2014/03/04 职场文书
公证委托书大全
2014/04/04 职场文书
关于教师节的广播稿
2014/09/10 职场文书
公司财务部岗位职责
2015/04/14 职场文书
Nginx速查手册及常见问题
2022/04/07 Servers