用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 相关文章推荐
向fckeditor编辑器插入指定代码的方法
May 25 Javascript
Javascript Global对象
Aug 13 Javascript
编写可维护面向对象的JavaScript代码[翻译]
Feb 12 Javascript
远离JS灾难css灾难之 js私有函数和css选择器作为容器
Dec 11 Javascript
jquery删除提示框弹出是否删除对话框
Jan 07 Javascript
js 获取、清空input type=&quot;file&quot;的值示例代码
Feb 19 Javascript
一个Action如何调用两个不同的方法
May 22 Javascript
实现非常简单的js双向数据绑定
Nov 06 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
Jun 06 Javascript
jquery过滤特殊字符',防sql注入的实现方法
Aug 17 Javascript
js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)
Dec 28 Javascript
微信小程序实现canvas分享朋友圈海报
Jun 21 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 截取GBK文档某个位置开始的n个字符方法
2017/03/08 PHP
input链接页面、打开新网页等等的具体实现
2013/12/30 Javascript
javasctipt如何显示几分钟前、几天前等
2014/04/30 Javascript
手机端网页点击链接触发自动拨打或保存电话的示例代码
2014/08/15 Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
2015/09/11 Javascript
浅析JavaScript中作用域和作用域链
2016/12/06 Javascript
详解NodeJs支付宝移动支付签名及验签
2017/01/06 NodeJs
JS正则匹配中文的方法示例
2017/01/06 Javascript
nodejs body-parser 解析post数据实例
2017/07/26 NodeJs
vue init webpack 建vue项目报错的解决方法
2018/09/29 Javascript
nodejs更新package.json中的dependencies依赖到最新版本的方法
2018/10/10 NodeJs
Vue.js上传图片到阿里云OSS存储的方法示例
2018/12/13 Javascript
js实现随机点名
2021/01/19 Javascript
Python splitlines使用技巧
2008/09/06 Python
python创建和删除目录的方法
2015/04/29 Python
Python中的字符串操作和编码Unicode详解
2017/01/18 Python
python中int与str互转方法
2018/07/02 Python
python实现基于朴素贝叶斯的垃圾分类算法
2019/07/09 Python
浅谈Python type的使用
2019/11/19 Python
pycharm新建Vue项目的方法步骤(图文)
2020/03/04 Python
Python基于进程池实现多进程过程解析
2020/04/30 Python
python3 循环读取excel文件并写入json操作
2020/07/14 Python
scrapy头部修改的方法详解
2020/12/06 Python
关于Python错误重试方法总结
2021/01/03 Python
改变生活的男士内衣:SAXX Underwear
2019/08/28 全球购物
应届生体育教师自荐信
2013/10/03 职场文书
小区门卫值班制度
2014/01/24 职场文书
喝酒驾驶检讨书
2014/10/01 职场文书
2014年大学学生会工作总结
2014/12/02 职场文书
给老婆的保证书
2015/01/16 职场文书
党支部书记岗位职责
2015/02/15 职场文书
2015年乡镇工作总结范文
2015/04/22 职场文书
河童之夏观后感
2015/06/11 职场文书
怎样做好公众演讲能力?
2019/08/28 职场文书
Django框架中视图的用法
2022/06/10 Python
Apache自带的ab压力测试工具的实现
2022/07/23 Servers