一个简单的双击编辑表格单元格，更新数据表的demo。

已经修改完毕！修改后的代码是demo2！

 =================================================================

demo2（修改后的）：

 

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
< HTML >
  < HEAD >
   < TITLE > Test Edit Table  </ TITLE >
   < META  NAME ="Generator"  CONTENT ="EditPlus" >
   < META  NAME ="Author"  CONTENT ="" >
   < META  NAME ="Keywords"  CONTENT ="" >
   < META  NAME ="Description"  CONTENT ="" >
   < style  type ="text/css" >
    td{}{
    border:2px solid red;
    }
   </ style >
  </ HEAD >

  < BODY >
   < table >
       < tr >
         < td  id ="td1"  ondblclick ="EditCells(this)" >
            aaa
         </ td >
         < td  id ="td2"  ondblclick ="EditCells(this)" >
            bbb
         </ td >
         < td  id ="td3"  ondblclick ="EditCells(this)" >
            ccc
         </ td >
       </ tr >
       < tr >
         < td  id ="td4"  ondblclick ="EditCells(this)" >
            aaa
         </ td >
         < td  id ="td5"  ondblclick ="EditCells(this)" >
            bbb
         </ td >
         < td  id ="td6"  ondblclick ="EditCells(this)" >
            ccc
         </ td >
       </ tr >
     </ table >
     < input  type ="hidden"  value =""  id ="HValue"   />
  </ BODY >
</ HTML >
< script  language ="javascript"  type ="text/javascript" >
    //当用户双击单元格的时候，判断 单元格里是否已经有textbox了，没有的话，再在单元格内显示textbox，value为原来单元格中的值
    
    function EditCells(thisCells)
    {
        var CellText= thisCells.innerHTML;
        if(CellText.substring(0,1)!="<")
        {
            thisCells.innerHTML="<input type=\"text\" id=\"TextBox1"+thisCells.id+"\" value=\""+thisCells.innerHTML+"\" onblur=\"thisTextBoxOnblur(this)\" />";
        document.getElementById("textBox1"+thisCells.id).focus();
        }
        
    }
    //当文本框失去焦点后，将修改后的值保存到隐藏控件中。并将单元格的内容变回原来的内容。
    function thisTextBoxOnblur(thisTextBox)
    {
        var thisCellsID=thisTextBox.id;
        thisCellsID=thisCellsID.substring(8,11);
        document.getElementById("HValue").value=thisTextBox.value;
        document.getElementById(thisCellsID).innerHTML=document.getElementById("HValue").value;
    }
    function UpdateData()
    {
        //在这里用ajax更新数据
    }
</ script >

 

 

 

 

=========================================================================

这原本是我在csdn上发的一个帖子：

见过石化的MES（生产执行系统）里面有个统计水、蒸汽和用电量的一个功能。大概是这样的：从数据库中读出来数据用表格呈现在页面上，双击单元格就可以编辑内容（单元格内变为文本框，原来单元格的内容被复制到单元格内文本框内），可以一次修改N多个单元格的内容，最后点一个保存按钮就可以把所有修改过的值保存起来。
我想模仿着做一下这个功能，请问修改后的数据保存在什么地方。
我暂时先做了一个简单的demo：修改单元格内文本框的值后，直接将本单元格的值更新为文本框的值，可以暂时先用ajax更新数据库，但是，我想做成一次性修改N个单元格，最后点一下保存，就可以保存所有修改过的数据，请问这该如何做，请大家给个思路，谢谢！
如果有第三方控件可以提供的话，请大家说出名字，不胜感激涕零（已经修改完毕，请看demo2）。

 

demo1：

 

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
< HTML >
  < HEAD >
   < TITLE > Test Edit Table  </ TITLE >
   < META  NAME ="Generator"  CONTENT ="EditPlus" >
   < META  NAME ="Author"  CONTENT ="" >
   < META  NAME ="Keywords"  CONTENT ="" >
   < META  NAME ="Description"  CONTENT ="" >
   < style  type ="text/css" >
    td{}{
    border:2px solid red;
    }
   </ style >
  </ HEAD >

  < BODY >
   < table >
       < tr >
         < td  id ="td1"  ondblclick ="EditCells(this)" >
            aaa
         </ td >
         < td  id ="td2"  ondblclick ="EditCells(this)" >
            bbb
         </ td >
         < td  id ="td3"  ondblclick ="EditCells(this)" >
            ccc
         </ td >
       </ tr >
       < tr >
         < td  id ="td4"  ondblclick ="EditCells(this)" >
            aaa
         </ td >
         < td  id ="td5"  ondblclick ="EditCells(this)" >
            bbb
         </ td >
         < td  id ="td6"  ondblclick ="EditCells(this)" >
            ccc
         </ td >
       </ tr >
     </ table >
     < input  type ="hidden"  value =""  id ="HValue"   />
  </ BODY >
</ HTML >
< script  language ="javascript"  type ="text/javascript" >
    //当用户双击单元格的时候，单元格内显示textbox，value为原来单元格中的值
    //如果用户再次双击单元格的时候，就会出问题，textbox中的内容就乱了。如何防止，我还没想出来。
    function EditCells(thisCells)
    {
        thisCells.innerHTML="<input type=\"text\" id=\"TextBox1"+thisCells.id+"\" value=\""+thisCells.innerHTML+"\" onblur=\"thisTextBoxOnblur(this)\" />";
        document.getElementById("textBox1"+thisCells.id).focus();
        //alert(thisCells.id);
    }
    //当文本框失去焦点后，将修改后的值保存到隐藏控件中。并将单元格的内容变回原来的内容。
    function thisTextBoxOnblur(thisTextBox)
    {
        var thisCellsID=thisTextBox.id;
        thisCellsID=thisCellsID.substring(8,11);
        document.getElementById("HValue").value=thisTextBox.value;
        document.getElementById(thisCellsID).innerHTML=document.getElementById("HValue").value;
    }

</ script >