Tip: you can modify some code before running
<!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=gb2312" /><title>Click a cell to change it to a text box.</title><style type="text/css"><!--body{font-size:12px;}td {border-width: 1px;border-top-style: solid;border-right-style: none;border-bottom-style: none;border-left-style: solid;text-align: center;width: 25%;height: 20px;}table {border-width:1px;border-right-style: solid;border-bottom-style: solid;border-top-style: none;border-left-style: none;border-color:#000;}.text { width: 95%;border: 1px dashed #FF9900; }--></style><script language="javascript">// Convert a cell into a text box function changeTotext (obj) {var tdValue = obj. innerText; obj. innerText = ""; var txt = document. createElement ("input"); txt. type = "text"; txt. value = tdValue; txt. id = "_ text_000000000 _"; txt. setAttribute ("className", "text"); obj. appendChild (txt); txt. select (); // obj. style. border = "1px dashed # ff9900";} // cancel the text box in the cell and assign the value in the text box to the cell function cancel (obj) {var txtValue = document. getElementById ("_ te Xt_000000000 _"). value; obj. innerText = txtValue ;} /*************************************** * ***** // event document. ondblclick = function () {if (event. srcElement. tagName. toLowerCase () = "td") {changeTotext (event. srcElement) ;}} document. onmouseup = function () {if (document. getElementById ("_ text_000000000 _") & event. srcElement. id! = "_ Text_000000000 _") {var obj = document. getElementById ("_ text_000000000 _"). parentElement; cancel (obj );}}</script></head><body><table width="50%" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td>Dblclick</td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr></table></body></html>
Tip: you can modify some code before running
