用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中document对象的一些重要属性
Mar 06 Javascript
AngularJS 模块详解及简单实例
Jul 28 Javascript
angularjs使用directive实现分页组件的示例
Feb 07 Javascript
Bootstrap导航中表单简单实现代码
Mar 06 Javascript
ES6新数据结构Set与WeakSet用法分析
Mar 31 Javascript
详解React 在服务端渲染的实现
Nov 16 Javascript
Node中使用ES6语法的基础教程
Jan 05 Javascript
js装饰设计模式学习心得
Feb 17 Javascript
Vue使用json-server进行后端数据模拟功能
Apr 17 Javascript
分享vue里swiper的一些坑
Aug 30 Javascript
vue-quill-editor富文本编辑器简单使用方法
Sep 21 Javascript
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 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将session放入memcached的设置方法
2014/02/14 PHP
php堆排序实现原理与应用方法
2015/01/03 PHP
ThinkPHP实现附件上传功能
2017/04/27 PHP
Laravel接收前端ajax传来的数据的实例代码
2017/07/20 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
chrome原生方法之数组
2011/11/30 Javascript
JQuery伸缩导航练习示例
2013/11/13 Javascript
jquery 页眉单行信息滚动显示实现思路及代码
2014/06/26 Javascript
Angular Js文件上传之form-data
2015/08/28 Javascript
javascript实现图片左右滚动效果【可自动滚动,有左右按钮】
2016/09/19 Javascript
require、backbone等重构手机图片查看器
2016/11/17 Javascript
js实现横向拖拽导航条功能
2017/02/17 Javascript
JavaScript中 DOM操作方法小结
2017/04/25 Javascript
基于pako.js实现gzip的压缩和解压功能示例
2017/06/13 Javascript
20行JS代码实现网页刮刮乐效果
2017/06/23 Javascript
微信小程序之数据缓存的实例详解
2017/09/29 Javascript
Angular实现点击按钮控制隐藏和显示功能示例
2017/12/29 Javascript
vue使用element-ui的el-input监听不了回车事件的解决方法
2018/01/12 Javascript
Vue使用NPM方式搭建项目
2018/10/25 Javascript
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
2019/02/14 jQuery
JS 遍历 json 和 JQuery 遍历json操作完整示例
2019/11/11 jQuery
Python3的urllib.parse常用函数小结(urlencode,quote,quote_plus,unquote,unquote_plus等)
2016/09/18 Python
Python中防止sql注入的方法详解
2017/02/25 Python
基于Numba提高python运行效率过程解析
2020/03/02 Python
Matplotlib.pyplot 三维绘图的实现示例
2020/07/28 Python
Python 找出英文单词列表(list)中最长单词链
2020/12/14 Python
CSS3 实现倒计时效果
2020/11/25 HTML / CSS
video结合canvas实现视频在线截图功能
2018/06/25 HTML / CSS
PHP如何自定义函数
2016/09/16 面试题
Java TransactionAPI (JTA) 主要包含几部分
2012/12/07 面试题
员工廉洁自律承诺书
2014/05/26 职场文书
市场调查策划方案
2014/06/10 职场文书
海洋天堂观后感
2015/06/05 职场文书
2016年优秀班主任先进事迹材料
2016/02/26 职场文书
详细了解java监听器和过滤器
2021/07/09 Java/Android
纯html+css实现打字效果
2021/08/02 HTML / CSS