用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 相关文章推荐
javascript Base类 包含基本的方法
Jul 22 Javascript
javascript获取选中的文本的方法代码
Oct 30 Javascript
JavaScript简单表格编辑功能实现方法
Apr 16 Javascript
js实现仿qq消息的弹出窗效果
Jan 06 Javascript
Js查找字符串中出现次数最多的字符及个数实例解析
Sep 05 Javascript
JS继承之借用构造函数继承和组合继承
Sep 07 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
Jan 23 Javascript
JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8
Jun 23 Javascript
JavaScript事件处理程序详解
Sep 19 Javascript
javascript中的数据类型检测方法详解
Aug 07 Javascript
浅谈JavaScript中this的指向问题
Jul 28 Javascript
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
Feb 11 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部分常见问题总结
2008/03/27 PHP
一个PHP数组应该有多大的分析
2009/07/30 PHP
PHP中CURL的CURLOPT_POSTFIELDS参数使用细节
2014/03/17 PHP
WordPress中自定义后台管理界面配色方案的小技巧
2015/12/29 PHP
php基于PDO连接MSSQL示例DEMO
2016/07/13 PHP
CL vs ForZe BO5 第二场 2.13
2021/03/10 DOTA
Javascript客户端将指定区域导出到Word、Excel的代码
2008/10/22 Javascript
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
2011/06/27 Javascript
jquery ajax 调用失败的原因示例介绍
2013/09/27 Javascript
基于jQuery实现select下拉选择可输入附源码下载
2016/02/03 Javascript
JS两个数组比较,删除重复值的巧妙方法(推荐)
2016/06/03 Javascript
jQuery实现磁力图片跟随效果完整示例
2016/09/16 Javascript
原生js实现新闻列表展开/收起全文功能
2017/01/20 Javascript
基于vue实现多引擎搜索及关键字提示
2017/03/16 Javascript
javascript修改浏览器title方法 JS动态修改浏览器标题
2017/11/30 Javascript
详解Vue组件之作用域插槽
2018/11/22 Javascript
vue 2.5.1 源码学习 之Vue.extend 和 data的合并策略
2019/06/04 Javascript
Vue.js标签页组件使用方法详解
2019/10/19 Javascript
python中使用urllib2获取http请求状态码的代码例子
2014/07/07 Python
跟老齐学Python之做一个小游戏
2014/09/28 Python
python如何去除字符串中不想要的字符
2020/07/05 Python
利用python GDAL库读写geotiff格式的遥感影像方法
2018/11/29 Python
pytorch 彩色图像转灰度图像实例
2020/01/13 Python
解决pycharm不能自动补全第三方库的函数和属性问题
2020/03/12 Python
详解HTML5之pushstate、popstate操作history,无刷新改变当前url
2017/03/15 HTML / CSS
德国自然时尚和有机产品购物网站:Waschbär
2019/05/29 全球购物
入团者的自我评价分享
2013/12/02 职场文书
顶岗实习接收函
2014/01/09 职场文书
党员活动日总结
2014/05/05 职场文书
授权委托书公证
2014/09/14 职场文书
2015年项目经理工作总结
2015/04/30 职场文书
房屋产权证明书
2015/06/19 职场文书
高中班主任培训心得体会
2016/01/07 职场文书
2019客服个人年终工作总结范文
2019/07/08 职场文书
详解解Django 多对多表关系的三种创建方式
2021/08/23 Python
KVM基础命令详解
2022/04/30 Servers