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.
Code
/*
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:
Code
<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.