用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的写法不同导致的兼容性问题的解决方法
Jul 29 Javascript
Js event事件在IE、FF兼容性问题
Jan 01 Javascript
Jquery实现鼠标移上弹出提示框、移出消失思路及代码
May 19 Javascript
jQuery中$.click()无效问题分析
Jan 29 Javascript
js仿土豆网带缩略图的焦点图片切换效果实现方法
Feb 23 Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
Jul 29 Javascript
jQuery实现form表单元素序列化为json对象的方法
Dec 09 Javascript
JavaScript动态检验密码强度的实现方法
Nov 09 Javascript
Vue2路由动画效果的实现代码
Jul 10 Javascript
基于JavaScript实现弹幕特效
Aug 27 Javascript
详解mpvue实现对苹果X安全区域的适配
Jul 31 Javascript
微信小程序实现拼图小游戏
Oct 22 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
把77A收信机改造成收音机
2021/03/02 无线电
使用PHP批量生成随机用户名
2008/07/10 PHP
深入理解require与require_once与include以及include_once的区别
2013/06/05 PHP
PHP 将数组打乱 shuffle函数的用法及简单实例
2016/06/17 PHP
静态html文件执行php语句的方法(推荐)
2016/11/21 PHP
实例介绍PHP删除数组中的重复元素
2019/03/03 PHP
Hutia 的 JS 代码集
2006/10/24 Javascript
jquery ajax 检测用户注册时用户名是否存在
2009/11/03 Javascript
jquery 清空file域示例(兼容个浏览器)
2013/10/11 Javascript
node.js中Socket.IO的进阶使用技巧
2014/11/04 Javascript
JavaScript实现数组随机排序的方法
2015/06/26 Javascript
jquery实现的判断倒计时是否结束代码
2016/02/05 Javascript
JavaScript+canvas实现七色板效果实例
2016/02/18 Javascript
javascript中错误使用var造成undefined
2016/03/31 Javascript
js轮播图代码分享
2016/07/14 Javascript
BootStrap glyphicon图标无法显示的解决方法
2016/09/06 Javascript
Angularjs 制作购物车功能实例代码
2016/09/14 Javascript
Bootstrap 轮播(Carousel)插件
2016/12/26 Javascript
微信小程序购物车、父子组件传值及calc的注意事项总结
2018/11/14 Javascript
微信小程序之 catalog 切换实现解析
2019/09/12 Javascript
jQuery实现计算器功能
2020/10/19 jQuery
element-ui中el-upload多文件一次性上传的实现
2020/12/02 Javascript
[01:04:06]DOTA2上海特级锦标赛A组资格赛#2 Secret VS EHOME第一局
2016/02/26 DOTA
python编程进阶之异常处理用法实例分析
2020/02/21 Python
python画环形图的方法
2020/03/25 Python
Python绘制全球疫情变化地图的实例代码
2020/04/20 Python
基于Python-turtle库绘制路飞的草帽骷髅旗、美国队长的盾牌、高达的源码
2021/02/18 Python
HelloFresh奥地利:立即订购烹饪盒
2019/02/22 全球购物
一年级家长会邀请函
2014/01/25 职场文书
金融学专业大学生职业生涯规划
2014/03/07 职场文书
舞蹈教育学专业自荐信
2014/06/15 职场文书
英文道歉信
2015/01/20 职场文书
2015年学校党支部工作总结
2015/04/01 职场文书
2019年励志签名:致拼搏路上的自己
2019/10/11 职场文书
Opencv中cv2.floodFill算法的使用
2021/06/18 Python
苹果M1芯片安装nginx 并且部署vue项目步骤详解
2021/11/20 Servers