After the project is completed, the user suddenly proposes during the test and acceptance, and 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.
Copy codeThe 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 <tbmain. rows. length; I ++)
{
For (var j = 0; j <tbmain. rows [I]. cells. length; 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 = "<div id = 'tdcag '> <input type = 'text' id = 'txtid' value ='" + tdtxt + "'> ";
Str + = "<input type = 'button 'value = ''onclick = 'changetdtext ()'> ";
Str + = "<input type = 'button 'value = 'cancel 'onclick = 'canceltdchanged ()'> ";
Str + = "<input type = 'den den 'id = 'tdinitvalue' value ='" + tdtxt + "'> ";
Str + = "</div> ";
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 way, in the <body> of the page, add an onload event with the value of ReWritable (), as shown below:Copy codeThe Code is as follows: <body onload = "ReWritable ();">
<Table id = "tbmain" style = "width: 100%;" border = "1">
<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>
In this way, a click event is added to each Td.
