动态表格Table类的实现
/// <reference path="Lib.js" />
/// <reference path="DabaBinder.js" />
//引入DataBinder.js
include("DataBinder.js");
/*
<table border="1">
<thead><tr>
<th></th>
</tr></thead>
<tbody><tr>
<td></td>
</tr></tbody>
</table>
*/
function Table(){
this.elmTable=null; //表格标签
this.templetRow=null; //模板行
this.displayBody=null; //显示区tbody标签
this.isOverChange=false; //鼠标移过时，是否改变颜色
this.hoverColor="#EBF3FD"; //鼠标移过颜色
this.isActiveChange=false; //行点击时，是否改变颜色
this.activeColor="#D9E8FB"; //行点击时颜色
this.activeRow=null; //当前活动行
}
Table.prototype = {
//设置鼠标移过时，是否改变颜色
SetOverChange: function(bOverChange) {
this.isOverChange = bOverChange;
},
//设置行点击时，是否改变颜色
SetActiveChange: function(bActiveChange) {
this.isActiveChange = bActiveChange;
},
//绑定表格对象
BindElement: function(elm) {
this.elmTable = elm;
Event.observe(this.elmTable, "mouseover", this.onMouseOver.bindAsEventListener(this));
Event.observe(this.elmTable, "mouseout", this.onMouseOut.bindAsEventListener(this));
Event.observe(this.elmTable, "click", this.onMouseClick.bindAsEventListener(this));
var tbody = this.elmTable.tBodies[0]; //取其第一个tbody为模板
this.templetRow = tbody.rows[0]; //取该tbody中的第一行为模板
this.elmTable.removeChild(tbody);
this.displayBody = document.createElement("TBODY"); //创建显示区tbody
this.elmTable.appendChild(this.displayBody); //添加到表格中
},
//绑定表格的ID
BindID: function(id) {
var elm = document.getElementById(id);
this.BindElement(elm);
},
_getEventRow: function(evn) {
var elm = Event.element(evn);
if (elm == this.elmTable) return null;
while (elm.tagName.toLowerCase() != "tr") {
elm = elm.parentNode;
if (elm == this.elmTable || elm == null) return null;
}
if (elm.parentNode != this.displayBody) return null;
return elm;
},
//鼠标移过时事件响应
onMouseOver: function(evn) {
var row = this._getEventRow(evn);
if (!row) return;
if (this.isOverChange) {
row.style.backgroundColor = this.hoverColor; //改变颜色
}
},
//鼠标移出时事件响应
onMouseOut: function(evn) {
var row = this._getEventRow(evn);
if (!row) return;
if (this.isOverChange) {
if (row == this.activeRow) {
//如果当前行是活动行，设置活为动行颜色
row.style.backgroundColor = this.activeColor;
}
else {
//设置为模板行颜色
row.style.backgroundColor = row.backgroundColor;
}
}
},
//行点击事件响应
onMouseClick: function(evn) {
var row = this._getEventRow(evn);
if (!row) return;
if (this.isActiveChange) {
if (this.activeRow != null) {
//恢复原活动行颜色
this.activeRow.style.backgroundColor = this.activeRow.backgroundColor;
}
//设置活动行颜色
row.style.backgroundColor = this.activeColor;
//设置当前行为活动行
this.activeRow = row;
}
},
//新增一行，该行结构与模板行一致
NewRow: function(bAdd) {
var _this = this;
var newRow = this.templetRow.cloneNode(true); //将模板行进行深层拷贝
newRow.backgroundColor = newRow.style.backgroundColor;
//添加到表格显示区中
if (bAdd == true || bAdd == null) {
this.displayBody.appendChild(newRow);
}
return newRow; //返回新行
},
//取得所有行
GetRows: function() {
return this.displayBody.rows;
},
//清空所有行
Clear: function() {
var newTbody = document.createElement("TBODY");
this.elmTable.replaceChild(newTbody, this.displayBody);
this.displayBody = newTbody;
},
//删除一行
DeleteRow: function(row) {
this.elmTable.deleteRow(row.rowIndex);
if (row == this.activeRow) {
this.activeRow = null;
}
},
//以下标为参数，删除一行
DeleteAt: function(index) {
this.displayBody.deleteRow(index);
var rows = this.GetRows();
if (rows[index] == this.activeRow) {
this.activeRow = null;
}
},
//添加一行
AddRow: function(row) {
this.displayBody.appendChild(row);
},
onBinding: function(row) { },
// 数据绑定
BindData: function(dataSource, mapList) {
var _this = this;
this.Clear();
this.repeater = new Repeater();
this.repeater.setMapList(mapList);
this.repeater.defaultCreateItem = function() {
var row = _this.NewRow(false);
return row;
};
this.repeater.setDataList(dataSource);
this.repeater.setContainer(this.displayBody);
this.repeater.Bind();
}
};
<!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">
<head>
<title></title>
<!--库文件所必须的三个文件-->
<script src="../JsLib/prototype.js" type="text/javascript"></script>
<script src="../JsLib/prototype_ext.js" type="text/javascript"></script>
<script src="../JsLib/Lib.js" type="text/javascript"></script>
<!--库文件所必须的三个文件-->
<script language="javascript" type="text/javascript"><!--
include("Table.js"); //头文件包含
//数据
var users = [{ user: "张三",sex:"M",age:20 },
{ user: "李四", sex: "F", age: 23 },
{ user: "王五", sex: "M", age: 22}];
//数据和模板的映射关系
var mapList = [{ id: "tdName", field: "user" },
{ id: "sltSex", field: "sex" },
{ id: "tbAge", field: "age"}];
Lib.main = function() { //这是主函数
var tblUser = new Table();
tblUser.BindID("tableUser"); //绑定到tableUser
tblUser.SetOverChange(true); //鼠标经过时，行改变颜色
tblUser.BindData(users, mapList); //绑定数据
};
function View(btn) {
var row = btn.parentNode.parentNode; //取得该行
var data = row.data; //取得该行所绑定的数据
alert(data.user + "\r\n" + data.sex + "\r\n" + data.age);
}
function Save(btn) {
var row = btn.parentNode.parentNode; //取得该行
var db = row.dataBinder; //取得该行的绑定器
db.Save(); //保存该行
//如果你想一次保存所有行的数据，请用tblUser的repeater.Save();
}
// --></script>
</head>
<body>
<table id="tableUser" border="1" width="400">
<thead><tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>操作</th>
</tr></thead>
<tbody><tr>
<td id="tdName"></td>
<td>
<select id="sltSex">
<option value="M">男</option>
<option value="F">女</option>
</select>
</td>
<td><input id="tbAge" type="text" size="4" /></td>
<td><a href="javascript:;" onclick="Save(this)">保存</a>
<a href="javascript:;" onclick="View(this)">查看</a></td>
</tr></tbody>
</table>
</body>
</html>
手动产生数据的例子，该例如果要实现以上动态编辑、数据保存的功能的话，则还要添加更多的代码才能实现，一般不推荐使用这种方法
代码如下:
<!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">
<head>
<title></title>
<!--库文件所必须的三个文件-->
<script src="../JsLib/prototype.js" type="text/javascript"></script>
<script src="../JsLib/prototype_ext.js" type="text/javascript"></script>
<script src="../JsLib/Lib.js" type="text/javascript"></script>
<!--库文件所必须的三个文件-->
<script language="javascript" type="text/javascript"><!--
include("Table.js"); //头文件包含
//数据
var users = [{ user: "张三",sex:"M",age:20 },
{ user: "李四", sex: "F", age: 23 },
{ user: "王五", sex: "M", age: 22}];
Lib.main = function() { //这是主函数
var tblUser = new Table();
tblUser.BindID("tableUser"); //绑定到tableUser
tblUser.SetOverChange(true); //鼠标经过时，行改变颜色
//手动生成数据
for (var i = 0; i < users.length; i++) {
var data = users[i];
var row = tblUser.NewRow(); //产生新行
//设置各单元格数据
row.cells["tdName"].innerHTML = data.user;
row.cells["tdSex"].innerHTML = (data.sex == "M" ? "男" : "女");
row.cells["tdAge"].innerHTML = data.age;
row.data = data; //设置data引用，以提供给View函数使用
}
};
function View(btn) {
var row = btn.parentNode.parentNode; //取得该行
var data = row.data; //取得该行所绑定的数据
alert(data.user + "\r\n" + data.sex + "\r\n" + data.age);
}
// --></script>
</head>
<body>
<table id="tableUser" border="1" width="400">
<thead><tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>操作</th>
</tr></thead>
<tbody><tr>
<td id="tdName"></td>
<td id="tdSex"></td>
<td id="tdAge"></td>
<td><a href="javascript:;" onclick="View(this)">查看</a></td>
</tr></tbody>
</table>
</body>
</html>
相关推荐
-
javescript完整操作Table的增加行，删除行的列子大全
Form Object example function delrow1() { var oElement=event.srcElement; while(oElement.tagName!="TR") { oElement=oElement.parentElement; } var oTBody=oElement.parentElement; oTBody.removeChild(oElement) } function delrow2()//刪除当前行 { var currRowI
-
删除Table表中的重复行的方法
利用SQL Server 2005的新功能NOW_NUMBER和CTE可以很好的实现. 举例说明如下: 建立测试数据: 复制代码 代码如下: create table Dup1 ( Col1 int null, Col2 varchar(20) null ) insert into Dup1 values (1, 'aaa'), (2, 'aaa'), (2, 'aaa'), (2, 'aaa'), (3, 'bbb'), (3, 'bbb'), (4, 'ccc'), (4, 'ddd'),
-
JQuery动态给table添加、删除行 改进版
复制代码 代码如下: <html> <head> <title> </title> <script src="js/jquery-1.4.2_min.js" type="text/javascript"></script> <script type="text/javascript" language="javascript"> var row
-
动态表格Table类的实现
复制代码 代码如下: /// <reference path="Lib.js" /> /// <reference path="DabaBinder.js" /> //引入DataBinder.js include("DataBinder.js"); /* <table border="1"> <thead><tr> <th></th> <
-
jQuery+json实现动态创建复杂表格table的方法
本文实例讲述了jQuery+json实现动态创建复杂表格table的方法.分享给大家供大家参考,具体如下: function SetSubTable() { var obj = jQuery.parseJSON($("#SubJsonStrValue").val()); window.ALLPARAMTERS = obj; var row_str = ""; var span_num = 1 for (var i = 0; i < obj.length; i+
-
JavaScript如何动态创建table表格
两种JavaScript动态创建table表格的方法,分享给大家,具体实现如下 方法一:最原始的方法,创建一一元素 var a1=document.createElement("table"); var a2=document.createElement("tbody"); var a3=document.createElement("tr"); var a4=document.createElement("td"); //开
-
JQuery Ajax动态生成Table表格
前言: 本示例大概功能是前台通过JQuery的Ajax调用一般处理程序(Handler),获取表格需要显示的信息,然后转换成json格式返回给前台,前台获取到数据后循环构建表格的行,最好把行附加到表里. 目标: a 熟悉简单JQuery Ajax的使用 b 了解如何构造基本的Json格式的数据(构建Json也可以通过第三方的dll) c 熟悉下handler的基本用法 1 简单效果图 2 前台代码 <%@ Page Language="C#" AutoEventWireup=&q
-
JQuery 动态生成Table表格实例代码
JQuery动态生成Table表格 主要用到了JQuery中的append和appendto的方法,具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type&quo
-
对Vue table 动态表格td可编辑的方法详解
项目中需求用到可编辑表格 下图这种 ↓ element UI 组件table表格中 增加template 模版 翻入input 根据业务逻辑增加全局变量 isEdit 是否变化. <el-table-column label="名称" width="140"> <template scope="scope"> <el-input v-if="scope.row.isEdit && scope
-
layui实现数据表格table分页功能（ajax异步）
layui实现数据表格table分页功能,异步加载,表格渲染,含条件查询. 一.引入layUI的相关资源 <link rel="stylesheet" href="${ctxPath}/vendor/layui/css/layui.css" rel="external nofollow" > <script src="${ctxPath}/vender/layui/layui.js" charset=&quo
-
Element实现动态表格的示例代码
目录 [代码背景] [代码实现] #1# -> 代码复用的基础是你需要一个可复用的组件 #2# -> 在展示页面使用动态表格组件 #3# -> 如何给动态表格根据需求动态添加序号列/索引列 [代码背景] 有这样一个业务需求场景,有大概十几张表归属于某个类别,用户希望在同一个页面,通过选择不同的查询指标展示不同的表格,这些表的表头样式类似但是又不完全相同,怎么做呢? 到目前为止所有基于Element UI的表格样式都是直接在页面写死的,像官方这样: <el-table :data=&
-
Angualrjs和bootstrap相结合实现数据表格table
AngularJS的数据表格 需要使用angualarjs.bootstrap.dirPagination.js 效果图: 1.html部分 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="app"> <head> <meta http-equiv="Content-Type" content="te
-
js生成动态表格并为每个单元格添加单击事件的方法
html: 复制代码 代码如下: <html> <head> <title>Demo</title> </head> <body> <label style="font-size:20px;width:600px;" >动态表格:</label><br/> <table border="1"> <tbody id="table&qu