js modifies the value of Td in the table (defining the click event of td)_javascript skills

After the project was completed, during the test and acceptance, the user suddenly suggested that the query results could be changed to facilitate printing. Hide engineering errors. But it was a headache to make requests at this time. Later, I thought about it and used the front-end code. In this way, as long as the following functions are added to the JS file of the project, the problem can be solved.

Copy code The code is as follows:

/*
When the page is loaded, for each td adds click events so that you don't need to make changes to each page.
*/
function ReWritable()
{
var tbmian=document.getElementById("tbmain");
for(var i=0;i{
for(var j=0;j{
　/*
Add click event attributes. The setAttribute method cannot be used here.
*/
tbmain.rows[i].cells[j].onclick=AddObjOfText;
}
}
}
/*
Click event, add Td The content is updated to a Div, which is loaded with a Text for the user to input the new Td value,
an OK button, and a Cancel button for saving or canceling the user's input.
A Hidden that saves the value of Td before the user enters a new value so that it can be restored when the user cancels.
*/
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 way, in the of the page, add the onload event, and assign its value to: ReWritable(), as follows:

Copy code The code is as follows:

> ;







< ;/tr>

11	12 < ;/td>	13
21	22	23
31	32	33

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