js实现可编辑表格一

最新推荐文章于 2024-08-23 08:04:25 发布

十一路客

最新推荐文章于 2024-08-23 08:04:25 发布

阅读量3.7k

点赞数

分类专栏： JS java web 文章标签： js editable table

JS 同时被 2 个专栏收录

63 篇文章 0 订阅

订阅专栏

java web

24 篇文章 0 订阅

订阅专栏

 
  from:<a href="http://apps.hi.baidu.com/share/detail/30648462">http://apps.hi.baidu.com/share/detail/30648462</a>  
 

[javascript]view plaincopy 
   
 GridEdit.js  

[javascript]view plaincopy 
   
 /**  
 * JS实现可编辑的表格    
 * 用法:EditTables(tb1,tb2,tb2,......);  
 * Create by Senty at 2008-04-12 
 **/  
   
 //设置多个表格可编辑  
 function EditTables() {  
     for (var i = 0; i < arguments.length; i++) {  
         SetTableCanEdit(arguments[i]);  
     }  
 }  
   
 //设置表格是可编辑的  
 function SetTableCanEdit(table) {  
     for (var i = 1; i < table.rows.length; i++) {  
         SetRowCanEdit(table.rows[i]);  
     }  
 }  
   
 function SetRowCanEdit(row) {  
     for (var j = 0; j < row.cells.length; j++) {  
   
         //如果当前单元格指定了编辑类型，则表示允许编辑  
         var editType = row.cells[j].getAttribute("EditType");  
         if (!editType) {  
             //如果当前单元格没有指定，则查看当前列是否指定  
             editType = row.parentNode.rows[0].cells[j].getAttribute("EditType");  
         }  
         if (editType) {  
             row.cells[j].onclick = function () {  
                 EditCell(this);  
             }  
         }  
     }  
   
 }  
   
 //设置指定单元格可编辑  
 function EditCell(element, editType) {  
   
     var editType = element.getAttribute("EditType");  
     if (!editType) {  
         //如果当前单元格没有指定，则查看当前列是否指定  
         editType = element.parentNode.parentNode.rows[0].cells[element.cellIndex].getAttribute("EditType");  
     }  
   
     switch (editType) {  
         case "TextBox":  
             CreateTextBox(element, element.innerHTML);  
             break;  
         case "DropDownList":  
             CreateDropDownList(element);  
             break;  
         default:  
             break;  
     }  
 }  
   
 //为单元格创建可编辑输入框  
 function CreateTextBox(element, value) {  
     //检查编辑状态，如果已经是编辑状态，跳过  
     var editState = element.getAttribute("EditState");  
     if (editState != "true") {  
         //创建文本框  
         var textBox = document.createElement("INPUT");  
         textBox.type = "text";  
         textBox.className = "EditCell_TextBox";  
   
   
         //设置文本框当前值  
         if (!value) {  
             value = element.getAttribute("Value");  
         }  
         textBox.value = value;  
   
         //设置文本框的失去焦点事件  
         textBox.onblur = function () {  
             CancelEditCell(this.parentNode, this.value);  
         }  
         //向当前单元格添加文本框  
         ClearChild(element);  
         element.appendChild(textBox);  
         textBox.focus();  
         textBox.select();  
   
         //改变状态变量  
         element.setAttribute("EditState", "true");  
         element.parentNode.parentNode.setAttribute("CurrentRow", element.parentNode.rowIndex);  
     }  
 }  
   
   
 //为单元格创建选择框  
 function CreateDropDownList(element, value) {  
     //检查编辑状态，如果已经是编辑状态，跳过  
     var editState = element.getAttribute("EditState");  
     if (editState != "true") {  
         //创建下接框  
         var downList = document.createElement("Select");  
         downList.className = "EditCell_DropDownList";  
   
         //添加列表项  
         var items = element.getAttribute("DataItems");  
         if (!items) {  
             items = element.parentNode.parentNode.rows[0].cells[element.cellIndex].getAttribute("DataItems");  
         }  
   
         if (items) {  
             items = eval("[" + items + "]");  
             for (var i = 0; i < items.length; i++) {  
                 var oOption = document.createElement("OPTION");  
                 oOption.text = items[i].text;  
                 oOption.value = items[i].value;  
                 downList.options.add(oOption);  
             }  
         }  
   
         //设置列表当前值  
         if (!value) {  
             value = element.getAttribute("Value");  
         }  
         downList.value = value;  
   
         //设置创建下接框的失去焦点事件  
         downList.onblur = function () {  
             CancelEditCell(this.parentNode, this.value, this.options[this.selectedIndex].text);  
         }  
   
         //向当前单元格添加创建下接框  
         ClearChild(element);  
         element.appendChild(downList);  
         downList.focus();  
   
         //记录状态的改变  
         element.setAttribute("EditState", "true");  
         element.parentNode.parentNode.setAttribute("LastEditRow", element.parentNode.rowIndex);  
     }  
   
 }  
   
   
 //取消单元格编辑状态  
 function CancelEditCell(element, value, text) {  
     element.setAttribute("Value", value);  
     if (text) {  
         element.innerHTML = text;  
     } else {  
         element.innerHTML = value;  
     }  
     element.setAttribute("EditState", "false");  
   
     //检查是否有公式计算  
     CheckExpression(element.parentNode);  
 }  
   
 //清空指定对象的所有字节点  
 function ClearChild(element) {  
     element.innerHTML = "";  
 }  
   
 //添加行  
 function AddRow(table, index) {  
     var lastRow = table.rows[table.rows.length - 1];  
     var newRow = lastRow.cloneNode(true);  
     table.tBodies[0].appendChild(newRow);  
     SetRowCanEdit(newRow);  
     return newRow;  
   
 }  
   
   
 //删除行  
 function DeleteRow(table, index) {  
     for (var i = table.rows.length - 1; i > 0; i--) {  
         var chkOrder = table.rows[i].cells[0].firstChild;  
         if (chkOrder) {  
             if (chkOrder.type = "CHECKBOX") {  
                 if (chkOrder.checked) {  
                     //执行删除  
                     table.deleteRow(i);  
                 }  
             }  
         }  
     }  
 }  
   
 //提取表格的值,JSON格式  
 function GetTableData(table) {  
     var tableData = new Array();  
     alert("行数：" + table.rows.length);  
     for (var i = 1; i < table.rows.length; i++) {  
         tableData.push(GetRowData(tabProduct.rows[i]));  
     }  
   
     return tableData;  
   
 }  
 //提取指定行的数据，JSON格式  
 function GetRowData(row) {  
     var rowData = {};  
     for (var j = 0; j < row.cells.length; j++) {  
         name = row.parentNode.rows[0].cells[j].getAttribute("Name");  
         if (name) {  
             var value = row.cells[j].getAttribute("Value");  
             if (!value) {  
                 value = row.cells[j].innerHTML;  
             }  
   
             rowData[name] = value;  
         }  
     }  
     //alert("ProductName:" + rowData.ProductName);  
     //或者这样：alert("ProductName:" + rowData["ProductName"]);  
     return rowData;  
   
 }  
   
 //检查当前数据行中需要运行的字段  
 function CheckExpression(row) {  
     for (var j = 0; j < row.cells.length; j++) {  
         expn = row.parentNode.rows[0].cells[j].getAttribute("Expression");  
         //如指定了公式则要求计算  
         if (expn) {  
             var result = Expression(row, expn);  
             var format = row.parentNode.rows[0].cells[j].getAttribute("Format");  
             if (format) {  
                 //如指定了格式，进行字值格式化  
                 row.cells[j].innerHTML = formatNumber(Expression(row, expn), format);  
             } else {  
                 row.cells[j].innerHTML = Expression(row, expn);  
             }  
         }  
   
     }  
 }  
   
 //计算需要运算的字段  
 function Expression(row, expn) {  
     var rowData = GetRowData(row);  
     //循环代值计算  
     for (var j = 0; j < row.cells.length; j++) {  
         name = row.parentNode.rows[0].cells[j].getAttribute("Name");  
         if (name) {  
             var reg = new RegExp(name, "i");  
             expn = expn.replace(reg, rowData[name].replace(/\,/g, ""));  
         }  
     }  
     return eval(expn);  
 }  
   
 ///  
 /**  
 * 格式化数字显示方式    
 * 用法  
 * formatNumber(12345.999,'#,##0.00');  
 * formatNumber(12345.999,'#,##0.##');  
 * formatNumber(123,'000000');  
 * @param num  
 * @param pattern  
 */  
 /* 以下是范例 
 formatNumber('','')=0 
 formatNumber(123456789012.129,null)=123456789012 
 formatNumber(null,null)=0 
 formatNumber(123456789012.129,'#,##0.00')=123,456,789,012.12 
 formatNumber(123456789012.129,'#,##0.##')=123,456,789,012.12 
 formatNumber(123456789012.129,'#0.00')=123,456,789,012.12 
 formatNumber(123456789012.129,'#0.##')=123,456,789,012.12 
 formatNumber(12.129,'0.00')=12.12 
 formatNumber(12.129,'0.##')=12.12 
 formatNumber(12,'00000')=00012 
 formatNumber(12,'#.##')=12 
 formatNumber(12,'#.00')=12.00 
 formatNumber(0,'#.##')=0 
 */  
 function formatNumber(num, pattern) {  
     var strarr = num ? num.toString().split('.') : ['0'];  
     var fmtarr = pattern ? pattern.split('.') : [''];  
     var retstr = '';  
   
     // 整数部分     
     var str = strarr[0];  
     var fmt = fmtarr[0];  
     var i = str.length - 1;  
     var comma = false;  
     for (var f = fmt.length - 1; f >= 0; f--) {  
         switch (fmt.substr(f, 1)) {  
             case '#':  
                 if (i >= 0) retstr = str.substr(i--, 1) + retstr;  
                 break;  
             case '0':  
                 if (i >= 0) retstr = str.substr(i--, 1) + retstr;  
                 else retstr = '0' + retstr;  
                 break;  
             case ',':  
                 comma = true;  
                 retstr = ',' + retstr;  
                 break;  
         }  
     }  
     if (i >= 0) {  
         if (comma) {  
             var l = str.length;  
             for (; i >= 0; i--) {  
                 retstr = str.substr(i, 1) + retstr;  
                 if (i > 0 && ((l - i) % 3) == 0) retstr = ',' + retstr;  
             }  
         }  
         else retstr = str.substr(0, i + 1) + retstr;  
     }  
   
     retstr = retstr + '.';  
     // 处理小数部分     
     str = strarr.length > 1 ? strarr[1] : '';  
     fmt = fmtarr.length > 1 ? fmtarr[1] : '';  
     i = 0;  
     for (var f = 0; f < fmt.length; f++) {  
         switch (fmt.substr(f, 1)) {  
             case '#':  
                 if (i < str.length) retstr += str.substr(i++, 1);  
                 break;  
             case '0':  
                 if (i < str.length) retstr += str.substr(i++, 1);  
                 else retstr += '0';  
                 break;  
         }  
     }  
     return retstr.replace(/^,+/, '').replace(/\.$/, '');  
 }    

[html]view plaincopy 
   
 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test3.aspx.cs" Inherits="Bee.test3" %>  
   
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
 <html>  
 <head>  
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
 <title>编辑表格数据</title>  
 <style type="text/css">  
 body,div,p,ul,li,font,span,td,th{  
 font-size:10pt;  
 line-height:155%;  
 }  
 table{  
 border-top-width: 1px;  
 border-right-width: 1px;  
 border-bottom-width: 0px;  
 border-left-width: 1px;  
 border-top-style: solid;  
 border-right-style: solid;  
 border-bottom-style: none;  
 border-left-style: solid;  
 border-top-color: #CCCCCC;  
 border-right-color: #CCCCCC;  
 border-bottom-color: #CCCCCC;  
 border-left-color: #CCCCCC;  
 }  
 td{  
 border-bottom-width: 1px;  
 border-bottom-style: solid;  
 border-bottom-color: #CCCCCC;  
 }  
 .EditCell_TextBox {  
 width: 90%;  
 border:1px solid #0099CC;  
 }  
 .EditCell_DropDownList {  
 width: 90%;  
 }  
 </style>  
 </head>  
   
 <body>  
 <form id="form1" name="form1" method="post" action="">  
 <h3>可编辑的表格</h3>  
 <table width="698" border="0" cellpadding="0" cellspacing="0" id="tabProduct">  
     <tr>  
       <td width="32" align="center" bgcolor="#EFEFEF" name="Num"><input type="checkbox" name="checkbox" value="checkbox" /></td>  
       <td width="186" bgcolor="#EFEFEF" Name="Num" EditType="TextBox">序号</td>  
       <td width="152" bgcolor="#EFEFEF" Name="ProductName" EditType="DropDownList" DataItems="{text:'A',value:'a'},{text:'B',value:'b'},{text:'C',value:'c'},{text:'D',value:'d'}">商品名称</td>  
       <td width="103" bgcolor="#EFEFEF" Name="Amount" EditType="TextBox">数量</td>  
       <td width="103" bgcolor="#EFEFEF" Name="Price" EditType="TextBox">单价</td>  
       <td width="120" bgcolor="#EFEFEF" Name="SumMoney" Expression="Amount*Price" Format="#,###.00">合计</td>  
     </tr>  
     <tr>  
       <td align="center" bgcolor="#FFFFFF"><input type="checkbox" name="checkbox2" value="checkbox" /></td>  
       <td bgcolor="#FFFFFF">1</td>  
       <td bgcolor="#FFFFFF" Value="c">C</td>  
       <td bgcolor="#FFFFFF">0</td>  
       <td bgcolor="#FFFFFF">0</td>  
       <td bgcolor="#FFFFFF">0</td>  
     </tr>  
     <tr>  
       <td align="center" bgcolor="#FFFFFF"><input type="checkbox" name="checkbox22" value="checkbox" /></td>  
       <td bgcolor="#FFFFFF">2</td>  
       <td bgcolor="#FFFFFF" value="d">D</td>  
       <td bgcolor="#FFFFFF">0</td>  
       <td bgcolor="#FFFFFF">0</td>  
       <td bgcolor="#FFFFFF">0</td>  
     </tr>  
 </table>  
   
 <br />  
 <input type="button" name="Submit" value="新增" onclick="AddRow(document.getElementById('tabProduct'),1)" />  
 <input type="button" name="Submit2" value="删除" onclick="DeleteRow(document.getElementById('tabProduct'),1)" />  
 <input type="button" name="Submit22" value="重置" onclick="window.location.reload()" />  
 <input type="submit" name="Submit3" value="提交" onclick="GetTableData(document.getElementById('tabProduct'));return false;" />  
 </form>  
   
 <script type="text/javascript" src="Scripts/GridEdit.js"></script>  
 <script type="text/javascript">  
     var tabProduct = document.getElementById("tabProduct");  
   
     // 设置表格可编辑  
     // 可一次设置多个，例如：EditTables(tb1,tb2,tb2,......)  
     EditTables(tabProduct);  
   
   
 </script>  
 </body>  
 </html>  