源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

动态表格Table类的实现

  • 时间:2020-04-25 16:44 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:动态表格Table类的实现
[url=javascript:;]<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>
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部