Community Learn Tools Library Leisure
search
English
Home > Web Front-end > JS Tutorial > js modifies the value of Td in the table (defining the click event of td)_javascript skills

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

WBOY
Release： 2016-05-16 17:44:08
Original
1432 people have browsed it

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.
Related labels：
table click event
source：php.cn
Previous article：jquery plug-in information pop-up box showInfoDialog (success/error/warning/notification/background mask)_jquery Next article：js modifies the value of Td in the table (defining the double-click event of td)_javascript skills
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
How to retrieve values ​​of unselected rows in HTML data table using jquery I'm trying to get the value of all rows where the button was not clicked. For example, whe...
From 2024-04-05 09:26:49
0
1
1418
Retrieve nested related values ​​in mysql I'm trying to retrieve related values ​​based on multiple entries in a database. I'm very ...
From 2024-04-04 17:29:06
0
2
365
How to listen for specific click events but suppress others? My web application contains an HTML table where each row links to a specific URL: <tabl...
From 2024-04-04 16:55:27
0
1
317
Vertically rotated table title, centered + bottom aligned, cross-browser I have a table with rotated headers that looks as expected in Chrome, but not in Firefox. ...
From 2024-04-04 16:45:25
0
1
330
Table with fixed header and rotated column headers I have a table with a fixed header and a fixed first column. I also want to rotate the col...
From 2024-04-03 08:50:32
0
1
362
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template