Js: modifying the Td value in table (defining the double-click event of td) _ javascript skills

This is the changed code to implement the following functions: Remove "OK" and "cancel. Click to double-click the event, and Press ESC to cancel the change. If you are interested, you can understand the customer requirements first.
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.

The 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 {
For (var j = 0; 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 ="

";
Str + ="";
Str + ="

";
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.

The Code is as follows:

Thead, thead, thead
Tfoot, tfoot, tfoot
11	12	13
21	22	23
31	32	33