html+javascript实现可编辑表格

最新推荐文章于 2024-08-08 07:55:50 发布
光着脚丫数星星
最新推荐文章于 2024-08-08 07:55:50 发布
阅读量2.7w
点赞数 6
分类专栏： Java后台文章标签： javascript
Java后台专栏收录该内容
134 篇文章 0 订阅
订阅专栏
功能描述：单击页面使单元格td变成可编辑状态，输入内容后，当单元格失去焦点时，保存输入的内容。
点击增加行，在table的末尾增加一行；点击删除行，删除table中最末尾的一行。
[html]view plaincopyprint? 
   
 <!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>    
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />    
 <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>    
 <script>  
     /**   
 * 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);    
 //计算新增加行的序号，需要引入jquery 的jar包  
 var startIndex = $.inArray(lastRow,table.rows);  
 var endIndex = table.rows;   
 nbsp;table.tBodies[0].appendChild(newRow);    
 newRow.cells[0].innerHTML=endIndex-startIndex;  
 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(/\.$/,'');      
 }    
 </script>  
 </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 language="javascript" src="GridEdit.js"></script>    
 <script language="javascript">    
 var tabProduct = document.getElementById("tabProduct");    
     
 // 设置表格可编辑    
 // 可一次设置多个，例如：EditTables(tb1,tb2,tb2,......)    
 EditTables(tabProduct);    
     
     
 </script>    
 </body>    
 </html>    