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

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

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

demo2（修改后的）：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE>Test Edit Table </TITLE>

td{

border:2px solid red;

}

</style>

</HEAD>

<BODY>

<table>

<tr>

aaa

</td>

bbb

</td>

ccc

</td>

</tr>

<tr>

aaa

</td>

bbb

</td>

ccc

</td>

</tr>

</table>

</BODY>

</HTML>

//当用户双击单元格的时候，判断单元格里是否已经有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>

td{

border:2px solid red;

}

</style>

</HEAD>

<BODY>

<table>

<tr>

aaa

</td>

bbb

</td>

ccc

</td>

</tr>

<tr>

aaa

</td>

bbb

</td>

ccc

</td>

</tr>

</table>

</BODY>

</HTML>

//当用户双击单元格的时候，单元格内显示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>

////////////////////////////////
////////Sixi. Let it be.../////
//////////////////////////////