用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简单实现图片切换效果的方法
May 12 Javascript
jquery实现可横向和竖向展开的动态下滑菜单效果
Aug 24 Javascript
Javascript设计模式理论与编程实战之简单工厂模式
Nov 03 Javascript
整理Javascript函数学习笔记
Dec 01 Javascript
axios中cookie跨域及相关配置示例详解
Dec 20 Javascript
JavaScript体验异步更好的解决办法
Jan 08 Javascript
angular4 JavaScript内存溢出问题
Mar 06 Javascript
react在安卓中输入框被手机键盘遮挡问题的解决方法
Sep 03 Javascript
vue+axios+promise实际开发用法详解
Oct 15 Javascript
微信小程序自定义导航栏
Dec 31 Javascript
Windows下Node爬虫神器Puppeteer安装记
Jan 09 Javascript
jsonp跨域获取百度联想词的方法分析
May 13 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/07/08 PHP
Zend framework处理一个http请求的流程分析
2010/02/08 PHP
CI(CodeIgniter)框架中的增删改查操作
2014/06/10 PHP
php使用parse_url和parse_str解析URL
2015/02/22 PHP
PHP简单日历实现方法
2016/07/20 PHP
php自定义函数实现汉字转换utf8编码的方法
2016/09/29 PHP
对PHP依赖注入的理解实例分析
2016/10/09 PHP
JScript内置对象Array中元素的删除方法
2007/03/08 Javascript
使用apply方法处理数组的三个技巧[译]
2012/09/20 Javascript
让html页面不缓存js的实现方法
2014/10/31 Javascript
avalon js实现仿google plus图片多张拖动排序附源码下载
2015/09/24 Javascript
JSONP跨域请求实例详解
2016/07/04 Javascript
15位和18位身份证JS校验的简单实例
2016/07/18 Javascript
jQuery实现遍历复选框的方法示例
2017/03/06 Javascript
详解Vue.js分发之作用域槽
2017/06/13 Javascript
seajs实现强制刷新本地缓存的方法分析
2017/10/16 Javascript
React全家桶环境搭建过程详解
2018/05/18 Javascript
微信小程序实现弹出菜单功能
2018/06/12 Javascript
layui之数据表格--与后台交互获取数据的方法
2019/09/29 Javascript
Vue学习之组件用法实例详解
2020/01/06 Javascript
对于Python中RawString的理解介绍
2016/07/07 Python
python绘制评估优化算法性能的测试函数
2019/06/25 Python
django rest framework serializers序列化实例
2020/05/13 Python
python UDF 实现对csv批量md5加密操作
2021/01/01 Python
CSS中几个与换行有关的属性简明总结
2014/04/15 HTML / CSS
CSS3中的content属性使用示例
2015/07/20 HTML / CSS
使用CSS3编写灰阶滤镜来制作黑白照片效果的方法
2016/05/09 HTML / CSS
HTML5新增加的功能详解
2016/09/05 HTML / CSS
西班牙伏林航空公司:Vueling
2016/08/05 全球购物
英国领先的酒杯和水晶玻璃器皿制造商:Dartington Crystal
2019/06/23 全球购物
建筑工程技术应届生求职信
2013/11/17 职场文书
中英文求职信范文
2014/01/27 职场文书
会计学自我鉴定
2014/02/06 职场文书
员工拓展培训方案
2014/02/15 职场文书
药店收银员岗位职责
2015/04/07 职场文书
Python Pandas读取Excel日期数据的异常处理方法
2022/02/28 Python