html页面tableview,用JS写的一个TableView控件代码

请看看编码是否规范,使用是否方便

HTML:

代码

编号姓名

{value}{value}

编号名称

{value}{value}

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

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);

输出结果为:

20100123232907736.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/573498.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

a4988 脉宽要求_A4982/A4984/A4985和A4988设备主要针对办公室自动化市场

随着社会的发展&#xff0c;在工作中&#xff0c;办公室的自动化需求加大&#xff0c;这就需要有各种办公室自动化设备的支持。Allegro MicroSystems公司宣布扩展其微步电动机驱动器系列&#xff0c;该系列共包含可减少外置元件和利用简单STEP(步进)和Direction(方向)接口的四款…

HTML中空格代码为,html空格 html 空格代码

html 空格和html空格代码篇在HTML网页排版机关时&#xff0c;一个翰墨与翰墨间空格可使用一个使用空格键直接空一格便可。然则要实现多个空格间隔&#xff0c;打再多空格键空格&#xff0c;始终至多展现一个空格地位。那末如何才智html构造中笔墨间完成多个空格成果&#xff1f…

centos 下载文件很慢_CentOS镜像下载

官网下载链接&#xff1a;http://isoredirect.centos.org/centos/7/isos/x86_64/step1: 进入下载页&#xff0c;选择阿里云站点进行下载Actual Country 国内资源 Nearby Countries 周边国家资源阿里云站点&#xff1a;http://mirrors.aliyun.com/centos/7/isos/x86_64/每个链接…

使用java实现持续移动的小球

原创作品&#xff0c;可以转载&#xff0c;但是请标注出处地址http://www.cnblogs.com/V1haoge/p/5559829.html 仅为自己学习作品&#xff0c;使用java的JFrame框架实现持续移动的小球。 最核心的部分为实现小球移动的move()方法&#xff0c;在小球碰到墙壁四壁的时候得以反弹&…

移动端html搜索怎么写,移动端实现搜索功能

在移动端需要实现如下搜索相关的功能点击搜索按钮实现搜索搜索按钮这里首先就会遇到怎么弹出搜索按钮。在html5 中 input 已经支持search 类型&#xff0c;iso/安卓所幸也都有自己的相应实现。只需要按照移动端的标准来写&#xff0c;那我就会为我们提供我们所需的搜索按钮。按…

git master代码被删除 怎么恢复_git 分支的删除与恢复

有没有&#xff0c;git创建无意中名字起错了&#xff0c;分支上传错了&#xff0c;想删除了&#xff1f;删除做了想恢复了&#xff1f;远程与本地都删除了要恢复的情况呢&#xff1f;如果有&#xff0c;那么一下内容获取你会感兴趣。删除分支有的时候可能会遇到需要删除git的br…

空白DirectX11应用程序

我用的开发工具是Visual Studio 2015&#xff0c;开发了第一个win32应用程序虽然顺利&#xff0c;但是一旦添加DirectX相关代码应用便无法启动了&#xff0c;出现了一连串问题&#xff01;让我瞬间一蹶不振&#xff01;但是隔了几天我尝试的心情又卷土重来&#xff0c;又尝试了…

计算机裸机与应用程序及用户之间的桥梁是,2016计算机二级《MS Office》单选试题与解析...

2016计算机二级《MS Office》单选试题与解析(1)下列叙述中正确的是A)一个算法的空间复杂度大&#xff0c;则其时间复杂度也必定大B)一个算法的空间复杂度大&#xff0c;则其时间复杂度必定小C)一个算法的时间复杂度大&#xff0c;则其空间复杂度必定小D)算法的时间复杂度与空间…

10kv线路负载率计算_10kV配电线路保护的整定计算

1、10kV配电线路的特点10kV配电线路结构特点是一致性差&#xff0c;如有的为用户专线&#xff0c;只接带一、二个用户&#xff0c;类似于输电线路&#xff1b;有的呈放射状&#xff0c;几十台甚至上百台变压器T接于同一条线路的各个分支上&#xff1b;有的线路短到几百m&#x…

diamond升级IP,覆盖的时候报错

这几天给客户调试DDR3 SDRAM Controllerd发现个很奇怪的问题。客户之前用的IP是DDR3 SDRAM Controllerd 1.4&#xff0c;客户想升级为DDR3 SDRAM Controllerd 3.0。客户直接双击之前的工程&#xff0c;然后regenerate&#xff0c;发现报错了&#xff0c;如下图。然后我就思考是…

一台微型计算机的处理速度主要取决于,2017年答案计算机等级考试题库「附答案」...

2017年答案计算机等级考试题库「附答案」一、单选题1、世界上首次提出存储程序计算机体系结构的是A 莫奇莱 B 艾仑图灵 C 乔治布尔 D 冯诺依曼2、世界上第一台电子计算机诞生于A 1941年 B 1946年 C 1949年 D 1950年3、世界上第一台电子数字计算机采用的主要逻辑部件是A 电子管 …

让我摘下星星送给你_想摘下星星给你摘下月亮给你是什么歌

最近中国新说唱有一首歌很是好听&#xff0c;这首歌歌曲开头是想摘下星星给你摘下月亮给你&#xff0c;那么这首歌是什么歌呢?下面就让我们来了解一下吧。想摘下星星给你摘下月亮给你是什么歌据悉这首歌叫作《星球坠落 (Live)》是由艾热 / 李佳隆演唱的星球坠落 (Live)歌手&am…

获取iOS系统版本

获取ios设备系统信息的方法 之 [UIDevice currentDevice] 获取iphone的系统信息使用[UIDevice currentDevice],信息如下&#xff1a; [[UIDevice currentDevice] systemName]&#xff1a;系统名称&#xff0c;如iPhone OS [[UIDevice currentDevice] systemVersion]&#xff1a…

html高度随宽度编号,纯css实现容器高度随宽度等比例变化的四种解决方案

使用一个隐藏的图片来实现这个方法是我最推荐的&#xff0c;因为不需要考虑任何兼容性&#xff0c;PC移动完美运行。除了增加了一个dom结构&#xff0c;但是相对与一个页面成百上千的代码来说&#xff0c;不值一提我们知道&#xff0c;div容器如果不给定高度&#xff0c;它的高…

cad上样条曲线上的点太多了_CAD样条曲线怎么能增加编辑点? CAD中如何按照

请问怎么增加编辑点&#xff01;&#xff01;谢谢用样条曲线编辑命令&#xff1a;splinedit&#xff0c;画好的样条曲线想编辑一下&#xff0c;但是有时编辑点太少了影响编辑效果。命令行示例如下命令命令: _splinedit选择样条曲线输入选项 [拟合数据(F)/闭合(C)/移动顶点(M)/精…

Oracle中的伪列

分页查询中&#xff0c;需要用到伪列rownum&#xff0c;代码如下&#xff1a; select * from (select rownum rn, name from cost where rownum < 6) where rn >3; 可是第一次用rownum&#xff0c;第二次用rn&#xff0c;位置不能变&#xff0c;否则出错&#xff0c;第一…

燕山大学计算机学院官网,燕山大学信息科学与工程学院(专业学位)计算机技术保研夏令营...

考研真题资料优惠价原价选择燕山大学信息科学与工程学院(专业学位)计算机技术保研夏令营信息&#xff0c;是考研之前需要获取相应的考研信息&#xff0c;比如考试大纲、招考专业、招考目录等等基本信息&#xff0c;这些内容是进行考研前期工作的必要准备。考生可以从各院校的研…

pde中微元分析法的主要思想_有限元方法的核心思想

有限元法(Finite Element Method)是基于近代计算机的快速发展而发展起来的一种近似数值方法&#xff0c;用来解决力学&#xff0c;数学中的带有特定边界条件的偏微分方程问题(PDE)。而这些偏微分方程是工程实践中常见的固体力学和流体力学问题的基础。有限元和计算机发展共同构…

phpnow升级php版本 php-5.2.14-Win32升级至5.3.5

PHPNow自带的PHP版本为5.2.14&#xff0c;而最后一次更新在于2010-9-22。下面来升级PHP5.3.5&#xff1a; 1、下载安装文件&#xff1a; 先下载PHP5.3.5&#xff0c;下载地址&#xff1a;php-5.3.5-Win32-VC6-x86.zip 访问密码&#xff1a;c69c 将下载的解压至phpnow的安装目…

计算机无法计算,计算器不能执行计算功能,运算结果始终为0

部分代码&#xff1a;public void onClick(View v) {// TODO Auto-generated method stubString strt1.getText().toString();switch(v.getId()){case R.id.button16:case R.id.button13:case R.id.button14:case R.id.button15:case R.id.button9:case R.id.button10:case R.i…