用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 分页全选或反选标识实现代码
Aug 09 Javascript
node.js中的fs.appendFileSync方法使用说明
Dec 17 Javascript
iframe里使用JavaScript控制主页转向的方法
Apr 03 Javascript
JS 通过系统时间限定动态添加 select option的实例代码
Jun 09 Javascript
Js遍历键值对形式对象或Map形式的方法
Aug 08 Javascript
微信小程序 教程之wxapp 视图容器 view
Oct 19 Javascript
原生js封装自定义滚动条
Mar 24 Javascript
JS随机数产生代码分享
Feb 24 Javascript
Vue实现跑马灯效果
May 25 Javascript
微信小程序实现导航栏和内容上下联动功能代码
Jun 29 Javascript
微信小程序抽奖组件的使用步骤
Jan 11 Javascript
Vue接口封装的完整步骤记录
May 14 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操作XML作为数据库的类
2010/12/19 PHP
利用PHP生成静态HTML文档的原理
2012/10/29 PHP
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.2 0
2008/03/22 Javascript
javascript写的简单的计算器,内容很多,方法实用,推荐
2011/12/29 Javascript
圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现
2012/12/27 Javascript
js判断页面中是否有指定控件的简单实例
2014/03/04 Javascript
jQuery动画与特效详解
2015/02/01 Javascript
百度地图api如何使用
2015/08/03 Javascript
jQuery展示表格点击变色、全选、删除
2017/01/05 Javascript
BootStrapTable 单选及取值的实现方法
2017/01/10 Javascript
JS动态生成年份和月份实例代码
2017/02/04 Javascript
微信小程序调用PHP后台接口 解析纯html文本
2017/06/13 Javascript
vue 设置proxyTable参数进行代理跨域
2018/04/09 Javascript
vue.js的vue-cli脚手架中使用百度地图API的实例
2019/01/21 Javascript
vue实现按需加载组件及异步组件功能
2019/05/27 Javascript
node.js使用zlib模块进行数据压缩和解压操作示例
2020/02/12 Javascript
[01:29]2017 DOTA2国际邀请赛官方英雄手办展示
2017/03/18 DOTA
python爬虫入门教程之糗百图片爬虫代码分享
2014/09/02 Python
Python函数参数类型*、**的区别
2015/04/11 Python
Python的Flask框架中使用Flask-Migrate扩展迁移数据库的教程
2016/06/14 Python
python paramiko模块学习分享
2017/08/23 Python
python互斥锁、加锁、同步机制、异步通信知识总结
2018/02/11 Python
浅谈Tensorflow由于版本问题出现的几种错误及解决方法
2018/06/13 Python
python爬虫 批量下载zabbix文档代码实例
2019/08/21 Python
python 实现多线程下载m3u8格式视频并使用fmmpeg合并
2019/11/15 Python
python socket通信编程实现文件上传代码实例
2019/12/14 Python
Python连接Mysql进行增删改查的示例代码
2020/08/03 Python
一套SQL笔试题
2016/08/14 面试题
大学生求职中的自我评价
2013/10/01 职场文书
工作中的自我评价如何写好
2013/10/28 职场文书
运动会横幅标语
2014/06/17 职场文书
社区个人对照检查材料(群众路线)
2014/09/26 职场文书
党的群众路线调研报告
2014/11/03 职场文书
男方婚前保证书
2015/02/28 职场文书
Python 把两层列表展开平铺成一层(5种实现方式)
2021/04/07 Python
如何使用pdb进行Python调试
2021/06/30 Python