用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 相关文章推荐
用js解决数字不能换行问题
Aug 10 Javascript
js中parseInt函数浅谈
Jul 31 Javascript
node.js中的console.dir方法使用说明
Dec 10 Javascript
一道常被人轻视的web前端常见面试题(JS)
Feb 15 Javascript
Vue.js在使用中的一些注意知识点
Apr 29 Javascript
vue移动UI框架滑动加载数据的方法
Mar 12 Javascript
说说node中的可读流和可写流的区别
Jun 01 Javascript
前端axios下载excel文件(二进制)的处理方法
Jul 31 Javascript
4个顶级JavaScript高级文本编辑器
Oct 10 Javascript
jQuery+PHP实现上传裁剪图片
Jun 29 jQuery
详解微信小程序框架wepy踩坑记录(与vue对比)
Mar 12 Javascript
vue实现轮播图帧率播放
Jan 26 Vue.js
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 调试工具Debug Tools
2011/04/30 PHP
修改ThinkPHP缓存为Memcache的方法
2014/06/25 PHP
PHP版微信小店接口开发实例
2016/11/12 PHP
利用php生成验证码
2017/02/23 PHP
总结一些PHP中好用但又容易忽略的小知识
2017/06/02 PHP
php 截取中英文混合字符串的方法
2018/05/31 PHP
PHP赋值的内部是如何跑的详解
2019/01/13 PHP
使用ucenter实现多站点同步登录的讲解
2019/03/21 PHP
JavaScript实现禁止后退的方法
2006/12/27 Javascript
符合标准的js表单提交的代码
2007/09/13 Javascript
基于jquery的使ListNav兼容中文首字拼音排序的实现代码
2011/07/10 Javascript
微信小程序 wxapp视图容器 view详解
2016/10/31 Javascript
Ionic+AngularJS实现登录和注册带验证功能
2017/02/09 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
2017/04/23 Javascript
通过V8源码看一个关于JS数组排序的诡异问题
2017/08/14 Javascript
简单谈谈vue的过渡动画(推荐)
2017/10/11 Javascript
JS中原始值和引用值的储存方式示例详解
2018/03/23 Javascript
JS实现图片上传多次上传同一张不生效的处理方法
2018/08/06 Javascript
开发用到的js封装方法(20种)
2018/10/12 Javascript
30分钟精通React今年最劲爆的新特性——React Hooks
2019/03/11 Javascript
js仿京东放大镜效果
2020/08/09 Javascript
python判断一个集合是否包含了另外一个集合中所有项的方法
2015/06/30 Python
Python实现Singleton模式的方式详解
2019/08/08 Python
pytorch 在网络中添加可训练参数,修改预训练权重文件的方法
2019/08/17 Python
使用python脚本自动创建pip.ini配置文件代码实例
2019/09/20 Python
Python列表list常用内建函数实例小结
2019/10/22 Python
python3的pip路径在哪
2020/06/23 Python
python zip()函数的使用示例
2020/09/23 Python
印度最大的酒店品牌网络:OYO Rooms
2016/07/24 全球购物
求职信内容考虑哪几点
2013/10/05 职场文书
银行竞聘演讲稿范文
2014/04/23 职场文书
学校党的群众路线教育实践活动对照检查材料
2014/09/24 职场文书
人事主管岗位职责
2015/02/04 职场文书
2016七夕情人节寄语
2015/12/04 职场文书
MySQL中distinct与group by之间的性能进行比较
2021/05/26 MySQL
Python使用华为API为图像设置多个锚点标签
2022/04/12 Python