用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 判断浏览器类型 去全角、半角空格 自动关闭当前窗口
Apr 10 Javascript
浅谈Javascript Base64 加密解密
Dec 28 Javascript
Javascript实现多彩雪花从天降散落效果的方法
Feb 02 Javascript
angularJS 中$scope方法使用指南
Feb 09 Javascript
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
Aug 23 Javascript
解决webpack打包速度慢的解决办法汇总
Jul 06 Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
Sep 01 Javascript
vue项目环境变量配置的实现方法
Oct 12 Javascript
微信小程序自定义模态弹窗组件详解
Dec 24 Javascript
JavaScript实现多个物体同时运动
Mar 12 Javascript
jQuery弹框插件使用方法详解
May 26 jQuery
手动实现vue2.0的双向数据绑定原理详解
Feb 06 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+Mysql+jQuery实现发布微博程序 jQuery篇
2011/10/08 PHP
PHP提示Deprecated: mysql_connect(): The mysql extension is deprecated的解决方法
2014/08/28 PHP
php最简单的删除目录与文件实现方法
2014/11/28 PHP
Laravel 自带的Auth验证登录方法
2019/09/30 PHP
学习JavaScript的最佳方法分享
2011/10/21 Javascript
JavaScript转换农历类实现及调用方法
2013/01/27 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
2014/08/12 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
2014/08/22 Javascript
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效
2015/04/12 Javascript
jQuery CSS3相结合实现时钟插件
2016/01/08 Javascript
js轮播图代码分享
2016/07/14 Javascript
Bootstrap CSS组件之大屏幕展播
2016/12/17 Javascript
JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】
2017/04/19 Javascript
iview table render集成switch开关的实例
2018/03/14 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
2019/07/22 Javascript
详解vue 命名视图
2019/08/14 Javascript
layui实现鼠标移动到单元格上显示数据的方法
2019/09/11 Javascript
jQuery/JS监听input输入框值变化实例
2019/10/17 jQuery
[43:51]2014 DOTA2国际邀请赛中国区预选赛 Dream Times VS TongFu
2014/05/22 DOTA
Python之循环结构
2019/01/15 Python
Python+OpenCV图片局部区域像素值处理改进版详解
2019/01/23 Python
Python imread、newaxis用法详解
2019/11/04 Python
使用python写一个自动浏览文章的脚本实例
2019/12/05 Python
如何将PySpark导入Python的放实现(2种)
2020/04/26 Python
pycharm不以pytest方式运行,想要切换回普通模式运行的操作
2020/09/01 Python
python 实现批量图片识别并翻译
2020/11/02 Python
Django后端按照日期查询的方法教程
2021/02/28 Python
导出HTML5 Canvas图片并上传服务器功能
2019/08/16 HTML / CSS
美国工业用品采购网站:Zoro.com
2020/10/27 全球购物
文体活动实施方案
2014/03/27 职场文书
幼儿教师师德承诺书
2014/05/23 职场文书
企业贷款委托书格式
2014/09/12 职场文书
2015学习委员工作总结范文
2015/04/03 职场文书
MySQL 角色(role)功能介绍
2021/04/24 MySQL
python实现语音常用度量方法的代码详解
2021/05/25 Python
Python中Selenium对Cookie的操作方法
2021/07/09 Python