Home > Developer > JavaScript
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.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
