用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 相关文章推荐
如何实现iframe(嵌入式帧)的自适应高度
Jul 26 Javascript
js常用函数 不错
Sep 08 Javascript
使用jquery插件实现图片延迟加载技术详细说明
Mar 12 Javascript
简单的两种Extjs formpanel加载数据的方式
Nov 09 Javascript
node.js中watch机制详解
Nov 17 Javascript
JavaScript设置body高度为浏览器高度的方法
Feb 09 Javascript
vue组件间通信子与父详解(二)
Nov 07 Javascript
详解vue-cli3多页应用改造
Jun 04 Javascript
微信小程序swiper使用网络图片不显示问题解决
Dec 13 Javascript
浅谈Vue组件单元测试究竟测试什么
Feb 05 Javascript
原理深度解析Vue的响应式更新比React快
Apr 04 Javascript
解决vue项目,npm run build后,报路径错的问题
Aug 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执行zip与rar解压缩方法实现代码
2010/12/05 PHP
解析php中var_dump,var_export,print_r三个函数的区别
2013/06/21 PHP
PHP提示Warning:phpinfo() has been disabled函数禁用的解决方法
2014/12/17 PHP
Yii2实现ajax上传图片插件用法
2016/04/28 PHP
thinkphp ajaxfileupload实现异步上传图片的示例
2017/08/28 PHP
Smarty模板变量与调节器实例详解
2019/07/20 PHP
解决PHP curl或file_get_contents下载图片损坏或无法打开的问题
2019/10/11 PHP
用CSS+JS实现的进度条效果效果
2007/06/05 Javascript
网页中的图片的处理方法与代码
2009/11/26 Javascript
JS实现关闭当前页而不弹出提示框的方法
2016/06/22 Javascript
JS实现自动阅读单词(有道单词本添加功能)
2016/11/14 Javascript
jQuery选择器之子元素选择器详解
2017/09/18 jQuery
bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能
2017/12/28 Javascript
vue使用iframe嵌入网页的示例代码
2020/06/09 Javascript
详解Angular-ui-BootStrap组件的解释以及使用
2018/07/13 Javascript
JavaScript模板引擎原理与用法详解
2018/12/24 Javascript
Vue项目安装插件并保存
2019/01/28 Javascript
vue element实现表格合并行数据
2020/11/30 Vue.js
[49:27]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第一场
2018/04/05 DOTA
Python scikit-learn 做线性回归的示例代码
2017/11/01 Python
解决Tensorflow安装成功,但在导入时报错的问题
2018/06/13 Python
基于Keras的格式化输出Loss实现方式
2020/06/17 Python
python 实现百度网盘非会员上传超过500个文件的方法
2021/01/07 Python
日本土著品牌,综合型购物网站:Cecile
2016/08/23 全球购物
Hotter Shoes英国官网:英伦风格,舒适的鞋子
2017/12/28 全球购物
编程用JAVA解析XML的方式
2013/07/07 面试题
移动通信行业实习自我鉴定
2013/09/28 职场文书
日语专业个人的求职信
2013/12/03 职场文书
八年级美术教学反思
2014/02/02 职场文书
教育英语专业毕业生的求职信
2014/03/13 职场文书
促销活动计划书
2014/05/02 职场文书
学校群众路线专项整治方案
2014/10/31 职场文书
使用Golang的channel交叉打印两个数组的操作
2021/04/29 Golang
React中的Context应用场景分析
2021/06/11 Javascript
JS数组去重详情
2021/11/07 Javascript
通过Python把学姐照片做成拼图游戏
2022/02/15 Python