Js: modifying the Td value in the table (defining the td Click Event) _ javascript skills

Click the event to update the Td content to a Div with a Text loaded for the user to enter the new Td value, a confirmation button, and a Cancel button, the project is used to save or cancel the user's input content. During the test acceptance, the user suddenly proposes that the query results can be changed to facilitate printing. Hide project errors. However, it was a headache to make a request at this time. Later, I thought about using the front-end code. In this way, I can solve the problem by adding the following functions to the project's JS file.

The Code is as follows:

/*
When loading a page, add a click event for each td so that you do not need to change each page.
*/
Function ReWritable ()
{
Var tbmian = document. getElementById ("tbmain ");
For (var I = 0; I {
For (var j = 0; j {
/*
Add and click event properties. The setAttribute method cannot be used here.
*/
Tbmain. rows [I]. cells [j]. onclick = AddObjOfText;
}
}
}
/*
Click the event to update the Td content to a Div with a Text loaded for the user to enter the new Td value,
A OK button and a Cancel button are used to save or cancel user input.
A Hidden that saves the Td value before the user enters the new value, so that the user can recover when canceling the operation.
*/
Function AddObjOfText ()
{
Var tdcag = document. getElementById ("tdcag ");
If (tdcag! = Null)
{
Return;
}
Var tdid = window. event. srcElement;
Var tdtxt = tdid. innerText;
Var str ="

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

";
Tdid. innerHTML = str;
}
/*
Cancel the change and assign the Hidden value to Td.
*/
Function CancelTdChanged ()
{
Var tdInitValue = document. getElementById ("tdInitValue ");
Var tdtxt = tdInitValue. value;
Var tdid = document. getElementById ("tdcag"). parentNode;
Tdid. innerText = tdtxt;
}
/*
Save User changes and assign the Text value to Td
*/
Function ChangeTdText ()
{
Var txtId = document. getElementById ("txtId ");
Var tdid = document. getElementById ("tdcag"). parentNode;
Tdid. innerText = txtId. value;
}

In this wayTo add an onload event with the value assigned to: ReWritable (), as shown below:

The Code is as follows:

11	12	13
21	22	23
31	32	33

In this way, a click event is added to each Td.