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,一经查实,立即删除!

相关文章

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/每个链接…

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

在移动端需要实现如下搜索相关的功能点击搜索按钮实现搜索搜索按钮这里首先就会遇到怎么弹出搜索按钮。在html5 中 input 已经支持search 类型&#xff0c;iso/安卓所幸也都有自己的相应实现。只需要按照移动端的标准来写&#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 电子管 …

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

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

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

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

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的安装目…

iconfont 图标转为字体_App 中使用 Iconfont 的整套方案

作者&#xff1a;集美貌与才华于一身的 小芳什么是Iconfont我们通常看到的图标都是以图片形式集成到项目中使用&#xff0c;而 Iconfont 是一套字体图标&#xff0c;和我们使用自定义字体的方式是一样的&#xff0c;并且它是一种矢量图标。计算机中显示的图形一般分为两类---位…

class之cls

cls代表的是类本身&#xff0c;一般在静态方法中使用 转载于:https://www.cnblogs.com/goldd/p/5563845.html

aix 的c库为什么都是静态库_Linux静态库生成指南

Linux上的静态库&#xff0c;其实是目标文件的归档文件。在Linux上创建静态库的步骤如下&#xff1a;写源文件&#xff0c;通过 gcc -c xxx.c 生成目标文件。用 ar 归档目标文件&#xff0c;生成静态库。配合静态库&#xff0c;写一个使用静态库中函数的头文件。使用静态库时&a…

什么从什么写短句_新年新气象跨年了,准备好发什么说说了吗

happy new year今天是2020年的最后一天我们即将跨过0点步入2021年喽欢喜&#xff0c;激动&#xff0c;感慨&#xff0c;顿时涌上心头在这有意义的时刻小新觉得极为有必要发跨年朋友圈概括小新这一年的功绩为这一年画上完美的句号嘿嘿但现在很是纠结到底该发点儿啥呢OMG!选择太多…

计算机显卡960,2015显卡开年之作!NVIDIA GTX960首测

【PConline 首发评测】回顾2014年显卡的发展&#xff0c;GTX980/970可谓是其中最浓墨重彩的一笔&#xff0c;超高的能效比的吸引力实在太大&#xff0c;但是作为旗舰级产品并不是每一个人都享用的起的。在经过长达4个月的等待之后&#xff0c;我们终于等来的Maxwell架构的中端主…

mllib逻辑回归 spark_《Spark大数据分析实战》笔记

写在前面&#xff1a;此书很棒&#xff0c;但需要一定的编程功底&#xff0c;此外强烈建议买书&#xff0c;因为很多架构图、算子列表&#xff0c;我也不会摘抄下来。第一章 简介1.Spark执行的特点Hadoop中包含计算框架MapReduce和分布式文件系统HDFS等。Spark是MapReduce的替代…

晶振波形不是正弦波_晶振的分类及其应用

晶振分类虽然多种多样(可以在电子元器件采购平台亿配芯城上查看分类)&#xff0c;但是晶振的作用无非是以下2种&#xff1a;1.为系统提供基本的时钟信号。一个系统共用一个晶振&#xff0c;便于各部分保持同步&#xff08;有些通讯系统的基频和射频虽然使用不同的晶振&#xff…

第三代航空轴承钢产品 css-42l,航空轴承钢的发展及热处理技术(一)

航空轴承钢的发展及热处理技术(一)随着航空航天技术的发展&#xff0c;轴承钢的种类和承溫能力逐渐提高。我国航空航天轴承的热处理技术一直处于发展阶段&#xff0c;但与国外轴承钢的热处理技术相比仍有一定的上升空间。总结国内外航空航天轴承钢及热处理技术的发展&#xff0…

画米老鼠_蔡康永都在买的画你也买得起,村上隆作品收藏大全

疫情爆发已经一个多月了&#xff0c;大家的情绪犹如坐过山车跌宕起伏&#xff0c;从彷徨焦虑迷茫到惊恐绝望&#xff0c;再到现在的翘首以望。在疫情爆发之际&#xff0c;钟南山院士说了一句话特别鼓舞我&#xff0c;他呼吁宅家隔离&#xff0c;待春暖花开之时&#xff0c;我们…

本地服务器的音乐如何才能播放视频文件夹,mx播放器如何添加本地文件 添加本地文件设置方法...

更换播放器皮肤/主题颜色在这个版本中 主题颜色的设置十分丰富 不再拘泥于原来的黑白二色点击“设置”选择“列表”项 修改主题&#xff0c;选择一种自己喜欢的颜色 现在有十五种颜色可以选择用mxplayer播放音乐虽然它的功能包含了播放本地音频 但是实际使用的过程中我们可以发…