<!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="https://www.jb51.net/JsLib/prototype.js" type="text/javascript"></script>
<script src="https://www.jb51.net/JsLib/prototype_ext.js" type="text/javascript"></script>
<script src="https://www.jb51.net/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>
<thead><tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>操作</th>
</tr></thead>
<tbody><tr>
<td></td>
<td>
<select>
<option value="M">男</option>
<option value="F">女</option>
</select>
</td>
<td><input type="text" size="4" /></td>
<td><a href="javascript:;">保存</a>
<a href="javascript:;">查看</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="https://www.jb51.net/JsLib/prototype.js" type="text/javascript"></script>
<script src="https://www.jb51.net/JsLib/prototype_ext.js" type="text/javascript"></script>
<script src="https://www.jb51.net/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>
<thead><tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>操作</th>
</tr></thead>
<tbody><tr>
<td></td>
<td></td>
<td></td>
<td><a href="javascript:;">查看</a></td>
</tr></tbody>
</table>
</body>
</html>
您可能感兴趣的文章: