/*
When the page is loaded, the Click event is incremented for each TD so that no changes can be made to each page.
Add Click event Properties. The SetAttribute method cannot be used here.
*/
Onclick=addobjoftext;
Click the event to update the TD content to a Div, where a text is loaded, for the user to enter a new TD value,
A OK button, a Cancel button, to save or cancel the user's input.
A hidden that stores the value of TD before the user enters a new value so that the user resumes when canceled.
*/
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= ' OK ' onclick= ' changetdtext () ' > ';
str+= "<input type= ' button ' value= ' Cancel ' onclick= ' canceltdchanged () ' > ';
str+= "<input type= ' hidden ' 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 text value to TD
*/
function Changetdtext ()
{
var Txtid=document.getelementbyid ("txtID");
var Tdid=document.getelementbyid ("Tdcag"). parentnode;
Tdid.innertext=txtid.value;
}
Links: https://www.jb51.net/article/33171.htm
JS Modify the value of TD in table (define TD's Click event)