用JS写的一个TableView控件代码

请看看编码是否规范，使用是否方便
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>

输出结果为：

赞 (0)

相关推荐

  • JavaFX之TableView的使用详解

    JavaFX之TableView的使用详解

    TableView,算是一个很重要的控件,几乎随处可见,而且功能强大,数据展示效果良好.所以,在JavaFX中,我们自然而然也应该学习一下TableView的使用. 下面我们先看看TableView的效果图: 每一列都是一个TableColumn,我们可以直接创建也可以在JavaFX Scene Builder中创建好. TableView的数据填充,需要一个ObservableList.其中需要一个类来做数据填充. 下面看看我们数据填充的类: 复制代码 代码如下: import javafx.

  • tableView上面空出20个像素的解决办法

    tableView上面多出来20个像素,是因为自动布局的缘故,设置一下属性就可以解决问题 复制代码 代码如下: self.edgesForExtendedLayout = UIRectEdgeNone; 超级简单实用的方法,试试看吧

  • Android程序开发之UIScrollerView里有两个tableView

    Android程序开发之UIScrollerView里有两个tableView

    一,效果图. 二,工程图. 三,代码. RootViewController.h #import <UIKit/UIKit.h> @interface RootViewController : UIViewController <UIScrollViewDelegate,UITableViewDelegate,UITableViewDataSource> { UIScrollView *_scrolView; UITableView *_tableView; UITableView

  • iOS中UIScrollerView的用法及基于AotoLayout的控件悬停

    iOS中UIScrollerView的用法及基于AotoLayout的控件悬停

    UIScrollView为了显示多于一个屏幕的内容或者超过你能放在内存中的内容.Scroll View为你处理缩小放大手势,UIScrollView实现了这些手势,并且替你处理对于它们的探测和回应.其中需要注意的子类是UITableView以及UITextView(用来显示大量的文字).还有一个UIWebView,尽管那不是UIScrollView的直接子类,它适用UIScrollView去显示网页内容contentsize是内容的宽和高,contentsize.width是内容的宽度,cont

  • 使用UItableview在iOS应用开发中实现好友列表功能

    使用UItableview在iOS应用开发中实现好友列表功能

    基本实现 一.项目结构和plist文件 二.实现代码 1.说明: 主控制器直接继承UITableViewController 复制代码 代码如下: //  YYViewController.h //  02-QQ好友列表(基本数据的加载) // //  Created by apple on 14-5-31. //  Copyright (c) 2014年 itcase. All rights reserved. // #import <UIKit/UIKit.h> @interface YY

  • iOS开发中UITableview控件的基本使用及性能优化方法

    iOS开发中UITableview控件的基本使用及性能优化方法

    UITableview控件基本使用 一.一个简单的英雄展示程序 NJHero.h文件代码(字典转模型) 复制代码 代码如下: #import <Foundation/Foundation.h> @interface NJHero : NSObject /**  *  头像  */ @property (nonatomic, copy) NSString *icon; /**  *  名称  */ @property (nonatomic, copy) NSString *name; /**  

  • UITableView 实现汽车品牌（demo）

    UITableView 实现汽车品牌（demo）

    看TableView的资料其实已经蛮久了,一直想写点儿东西,却总是因为各种原因拖延,今天晚上有时间静下心来记录一些最近学习的TableView的知识.下面进入正题,UITableView堪称UIKit里面最复杂的一个控件了,使用起来不算难,但是要用好并不容易.当使用的时候我们必须要考虑到后台数据的设计,tableViewCell的设计和重用以及tableView的效率等问题. 上次介绍的UITableView,这里再做一个UITableView的小程序,汽车品牌,截图如下: 1.1创建项目,这里

  • 用JS写的一个TableView控件代码

    用JS写的一个TableView控件代码

    请看看编码是否规范,使用是否方便HTML: 代码 复制代码 代码如下: <table id="customTableView"> <thead> <tr> <td>编号</td> <td>姓名</td> </tr> </thead> <tbody><!--template-tbody--> <tr name="" style=&q

  • 用JS写的一个Ajax库(实例代码)

    myajax是一个用js编写的一个跨浏览器的ajax库,支持get, post, jsonp请求,精巧,简单. 一.发送GET请求: myajax.get({ <span style="white-space:pre"> </span>data: {}, //参数 url: "", //请求地址 //发生错误是调用 error: function(data) { }, //请求成功调用 success: function(data){ <

  • 自己动手写的jquery分页控件(非常简单实用)

    自己动手写的jquery分页控件(非常简单实用)

    最近接了一个项目,其中有需求要用到jquery分页控件,上网也找到了需要分页控件,各种写法各种用法,都是很复杂,最终决定自己动手写一个jquery分页控件,全当是练练手了.写的不好,还请见谅,本分页控件在chrome测试过,其他的兼容性不知道怎么没时间测试呢.欢迎有同样需求的小伙伴采用,在使用过程发现有问题欢迎提出批评建议. css: @charset "utf-"; * { margin:px; padding:px; font-family:"微软雅黑"; fo

  • JS实现动态给标签控件添加事件的方法示例

    本文实例讲述了JS实现动态给标签控件添加事件的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <

  • 用js写的一个路由(简单实例)

    前几天在网上看了一个大牛用js写了一个路由的,有一句代码一直不知道怎么回事,后来就自己写了一个,写的比较的粗糙,我觉得把面向对象的思想都搞得乱七八糟的,不过功能实现了. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js实现路由</title> </head> <body> &l

  • JS禁用页面上所有控件的实现方法(附demo源码下载)

    本文实例讲述了JS禁用页面上所有控件的实现方法.分享给大家供大家参考,具体如下: 利用页面元素的特征,可以捕捉到所有元素. function DisableElements(container,blnHidenButton) { if (!container) return; var aEle; if (navigator.appName =="Microsoft Internet Explorer") //IE { for (var i=0;i<container.all.le

  • 利用Android从0到1实现一个流布局控件

    利用Android从0到1实现一个流布局控件

    目录 前言 演示效果: 实现步骤: 核心点: 总结 前言 流布局在在项目中还是会时不时地用到的,比如在搜索历史记录,分类,热门词语等可用标签来显示的,都可以设计成流布局的展示方式.这里我从0到1实现了一个搜索历史记录的流布局. 演示效果: 实现步骤: 1.创建FlowLayoutView,创建数据源,并添加各个子view. 2.在onMeasure方法中遍历子view,通过简单计算剩余宽度,用集合存储当前行的几个子view,再根据子view的累加高度设置自己的最终尺寸. 3.在onLayout方

  • 用JS写了一个30分钟倒计时器的实现示例

    用JS写了一个30分钟倒计时器的实现示例

    前端页面倒计时功能在很多场景中会用到,如很多秒杀活动等,本文主要介绍了用JS写了一个30分钟倒计时器的实现示例,感兴趣的可以了解一下 <!DOCTYPE HTML> <html>     <head>         <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>         <title>Countdown Tim

  • Android实现显示电量的控件代码

    Android实现显示电量的控件代码

    下面介绍了Android实现显示电量的控件代码,具体代码如下: 1.目录结构,本人是使用安卓死丢丢. 2.运行界面,输入框中输入数值,点击刷新,会再电池中显示出相应的电量 3.绘制自定义电池控件,首先,新建一个类BatteryState继承View private Context mContext; private float width; private float height; private Paint mPaint; private float powerQuantity=0.5f;/

  • jQuery带时间的日期控件代码分享

    jQuery带时间的日期控件代码分享

    本文实例讲述了JS+CSS3实现的类似于苹果iwatch计时器特效.分享给大家供大家参考.具体如下: 带时间的jQuery日期控件代码是一款基于jQueryUI实现的,可自定义日期插件语言,这个日期控件的亮点就在于选择的时间可精确到分钟. 运行效果图:                    -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jQuery带时间的日期控件代码如下 <h

随机推荐