用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 相关文章推荐
document.all与WEB标准
May 13 Javascript
关于B/S判断浏览器断开的问题讨论
Oct 29 Javascript
在Node.js中实现文件复制的方法和实例
Jun 05 Javascript
javascript白色简洁计算器
May 04 Javascript
JQuery中两个ul标签的li互相移动实现方法
May 18 Javascript
AngularJS 依赖注入详解及示例代码
Aug 17 Javascript
js实现自定义路由
Feb 04 Javascript
原生JS实现圆环拖拽效果
Apr 07 Javascript
vue2.0 keep-alive最佳实践
Jul 06 Javascript
10行原生JS实现文字无缝滚动(超简单)
Jan 02 Javascript
详解webpack中的hash、chunkhash、contenthash区别
Jan 05 Javascript
ElementUI多个子组件表单的校验管理实现
Nov 07 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入门源程序
2006/10/09 PHP
安装PHP可能遇到的问题“无法载入mysql扩展” 的解决方法
2007/04/16 PHP
php获取某个目录大小的代码
2008/09/10 PHP
PHP $_SERVER详解
2009/01/16 PHP
php数组函数序列之sort() 对数组的元素值进行升序排序
2011/11/02 PHP
PHP文件注释标记及规范小结
2012/04/01 PHP
简单概括PHP的字符串中单引号与双引号的区别
2016/05/07 PHP
laravel5.0在linux下解决.htaccess无效和去除index.php的问题
2019/10/16 PHP
简洁短小的 JavaScript IE 浏览器判定代码
2010/03/21 Javascript
JavaScript 浏览器验证代码(来自discuz)
2010/07/17 Javascript
JS中的substring和substr函数的区别说明
2013/05/07 Javascript
js 自定义个性下拉选择框示例
2013/08/20 Javascript
js实现window.open不被拦截的解决方法汇总
2014/10/30 Javascript
javascript实现checkbox复选框实例代码
2016/01/10 Javascript
JS判断字符串字节数并截取长度的方法
2016/03/05 Javascript
JavaScript中0和&quot;&quot;比较引发的问题
2016/05/26 Javascript
vue.js 1.x与2.0中js实时监听input值的变化
2017/03/15 Javascript
强大的JavaScript响应式图表Chartist.js的使用
2017/09/13 Javascript
vue使用xe-utils函数库的具体方法
2018/03/06 Javascript
微信小程序 setData 对 data数据影响问题
2019/04/18 Javascript
eslint 的三大通用规则详解
2019/05/16 Javascript
vue实现吸顶、锚点和滚动高亮按钮效果
2019/10/21 Javascript
vue自定义组件实现双向绑定
2021/01/13 Vue.js
Python中的生成器和yield详细介绍
2015/01/09 Python
Python读取YUV文件,并显示的方法
2018/12/04 Python
pyqt5 禁止窗口最大化和禁止窗口拉伸的方法
2019/06/18 Python
Django应用程序入口WSGIHandler源码解析
2019/08/05 Python
python实现计算器功能
2019/10/31 Python
Python+Redis实现布隆过滤器
2019/12/08 Python
Python数据相关系数矩阵和热力图轻松实现教程
2020/06/16 Python
英国领先的葡萄酒专家:Majestic Wine
2017/05/30 全球购物
英国时尚服饰电商:Boohoo
2017/10/12 全球购物
上课说话检讨书大全
2014/01/22 职场文书
研修心得体会
2014/09/04 职场文书
党的群众路线教育实践活动个人对照检查材料范文
2014/09/25 职场文书
担保书格式
2015/01/20 职场文书