Customer requirements are paramount.
This is the changed code. The "OK" and "cancel" buttons are removed. Click to double-click the event, and Press ESC to cancel the change.
Copy codeThe Code is as follows: // Add a double-click event for each Td
Function ReWritable ()
{
Var tbmian = document. getElementById ("tbmain ");
// Cyclically, double-click events are added for each column of each row. However, the first row (thead) and the last row (tfoot) are not added.
For (var I = 1; I <tbmain. rows. length-1; I ++)
{
For (var j = 0; j <tbmain. rows [I]. cells. length; j ++)
{
Tbmain. rows [I]. cells [j]. ondblclick = TdDoubleClick;
}
}
}
// Define the double-click event of td to add a text box for it. You can enter it.
Function TdDoubleClick ()
{
// First, check whether the text box already exists. If so, return and add the text box without repeating. If not, Add.
Var tdcag = document. getElementById ("tdcag ");
Var tdid = null;
Var txtid = null;
Var curtd = window. event. srcElement;
If (tdcag! = Null) // already exists, return.
{
Return;
}
// If it does not exist, add
Tdid = window. event. srcElement;
Tdtxt = tdid. innerText;
Tdtxt = Trim (tdtxt );
Var str = "<div id = 'tdcag '> <input type = 'text' onblur = 'changetdtext (); 'id = 'txtid' value = '"+ tdtxt +"'> ";
Str + = "<input type = 'den den 'id = 'tdinitvalue' value ='" + tdtxt + "'> ";
Str + = "</div> ";
Tdid. innerHTML = str;
// Focus the text box.
Document. getElementById ("txtId"). focus ();
Var ctr = document. getElementById ("txtId"). createTextRange ();
Ctr. collapse (false );
Ctr. select ();
}
// Remove spaces before and after the string.
Function Trim (str)
{
Return str. replace (/(^ \ s *) | (\ s * $)/g ,"");
}
// Define the event when KeyPress is pressed. If it is an ESC key, cancel the change and restore it to the value before the change.
Document. onkeypress = function EscKeyPress ()
{
If (event. keyCode = 27)
{
CancelTdChanged ();
Return;
}
}
// Cancel the change,
Function CancelTdChanged ()
{
Var tdInitValue = document. getElementById ("tdInitValue ");
Var tdtxt = tdInitValue. value;
Var tdid = document. getElementById ("tdcag"). parentNode;
Tdid. innerText = Trim (tdtxt );
}
// Confirm the change,
Function ChangeTdText ()
{
Var txtId = document. getElementById ("txtId ");
If (txtId = null)
{
Return;
}
Var tdid = document. getElementById ("tdcag"). parentNode;
Tdid. innerText = Trim (txtId. value );
Return;
}
Other code, same as before. Only the changes to Thead and Tfoot of the table are canceled.Copy codeThe Code is as follows: <body onload = "ReWritable ();">
<Table id = "tbmain" style = "width: 100%;" border = "1">
<Thead>
<Tr>
<Td> thead, thead, thead </td>
</Tr>
</Thead>
<Tfoot>
<Tr>
<Td>
Tfoot, tfoot, tfoot
</Td>
</Tr>
</Tfoot>
<Tr>
<Td> 11
</Td>
<Td> 12
</Td>
<Td> 13 </td>
</Tr>
<Tr>
<Td> 21
</Td>
<Td> 22
</Td>
<Td> 23
</Td>
</Tr>
<Tr>
<Td> 31
</Td>
<Td> 32
</Td>
<Td> 33
</Td>
</Tr>
</Table>
</Body>
