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

输出结果为：

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

Java写js的Ajax代码_用JS写的一个Ajax库(实例代码)
myajax是一个用js编写的一个跨浏览器的ajax库,支持get, post, jsonp请求,精巧,简单. 一.发送GET请求: myajax.get({ data: {}, //参数 url: ...
用JS写了一个模拟串行加法器
在重温<编码:隐匿在计算机软硬件背后的语言>第12章--二进制加法器时,心血来潮用JS写了一个模拟串行加法器. 测试断言工具TestUtils.js function assertTrue ...
ocx js php,JavaScript_JS实现OCX控件的事件响应示例，JS支持OCX控件的事件（event）， - phpStudy...
JS实现OCX控件的事件响应示例 JS支持OCX控件的事件(event),当OCX控件定义的事件发生时,JS可以捕获该事件并对事件进行相应的处理. 个人理解,其实就是事件的响应由谁来完成,OCX控件自 ...
带你开发一个日历控件
首发我的博客 - https://blog.cdswyda.com/post/2017121010 日历控件多的不胜枚举,为什么我们还要再造一个轮子呢? 因为大多数日历控件都是用于选择日期的,有种需求 ...
vue树形结构html,怎么在vue中利用递归组件实现一个树形控件
怎么在vue中利用递归组件实现一个树形控件发布时间:2021-06-11 17:26:48 来源:亿速云阅读:81 作者:Leah 本篇文章为大家展示了怎么在vue中利用递归组件实现一个树形控件, ...
QT实现Qt Quick和three.js渲染和实现QML3D控件
QT实现Qt Quick和three.js渲染和实现QML3D控件项目简介项目技术项目展示主要源码片段解析获取完整项目源码传送门项目简介结合Qt Quick和three.js渲染. 演示 ...
android radiobutton_时隔一年，用新知识重构一个Android控件老库
一年前,用 Java 写了一个高可扩展选择按钮库.单个控件实现单选.多选.菜单选,且选择模式可动态扩展. 一年后,一个新的需求要用到这个库,项目代码已经全 Kotlin 化,强硬地插入一些 Java ...
android绘制view的撤销,DrawingView android 上的一个涂鸦控件。可以设置画笔的粗细，颜色，撤销上一笔涂鸦，提供保存图片的接口。 @codeKK Android开源站...
DrawingView 的原型来自DrawingView-Android,是 android 的一个可涂鸦控件. 之所以做这个控件是因为前段时间写了一个截图应用需要用到涂鸦功能,现在把涂鸦的控件单独拿 ...
转载几篇别人写的皮肤类控件的技术文章
转载几篇别人写的皮肤类控件的技术文章原连接:http://blog.sina.com.cn/s/blog_4c3538470100ezhu.html 实现控件的透明背景很多情况下,我们需要控件的 ...

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

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

最新文章

热门文章