动态表格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"></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"></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>

　　推荐阅读

　　FF IE兼容性的修改小结

1.html 标签如果用 $(id) 或者 getElementById 这两个方法取值时，要给该标签加上 id 的属性， IE 、 FF 才兼容。如 $(mobile): 如果填写 mobile 的 input 没有 id 属性在 FF 中会报这个变量 undefined ； 2. 取 >>>详细阅读

本文标题：动态表格Table类的实现

地址：http://www.17bianji.com/kaifa2/JS/28202.html

1/2 1