Customer demand is paramount.
This is the changed code, remove the "OK", "Cancel" button. Click to double-click the event, the user presses the ESC key to cancel the change.
Add a double click event for each TD
function rewritable ()
{
var Tbmian=document.getelementbyid ("Tbmain");
Loops, adding a double click event for each row of columns, but the first row (THEAD) is not added to the last row (TFOOT).
for (Var i=1;i<tbmain.rows.length-1;i++)
{
for (Var j=0;j<tbmain.rows[i].cells.length;j++)
{
Tbmain.rows[i].cells[j].ondblclick=tddoubleclick;
}
}
}
Define TD's Double-click event, add a text box to it, and use the user to enter it.
function Tddoubleclick ()
{
The first thing to decide is whether the box already exists, and if it does, it returns and does not add the text box repeatedly. If it does not exist, it is added.
var Tdcag=document.getelementbyid ("Tdcag");
var tdid=null;
var txtid=null;
var curtd=window.event.srcelement;
if (tdcag!=null)//already exists, returns.
{
Return
}
Does not exist, add the
Tdid=window.event.srcelement;
Tdtxt=tdid.innertext;
Tdtxt=trim (Tdtxt);
var str= "<div id= ' tdcag ' ><input type= ' text ' onblur= ' Changetdtext (); ' id= ' txtID ' value= ' +tdtxt+ ' ' > ';
str+= "<input type= ' hidden ' id= ' tdinitvalue ' value= '" "+tdtxt+" ' > ";
str+= "</div>";
TDID.INNERHTML=STR;
Gets the focus of the text box.
document.getElementById ("txtID"). focus ();
var Ctr=document.getelementbyid ("txtID"). createTextRange ();
Ctr.collapse (FALSE);
Ctr.select ();
}
Remove the spaces before and after the string.
function Trim (str)
{
Return Str.replace (/(^\s*) | ( \s*$)/g, "");
}
Defines the event when KeyPress is pressed and, if it is the ESC key, cancels the change and reverts to the value before the change.
document.onkeypress = function esckeypress ()
{
if (event.keycode==27)
{
Canceltdchanged ();
Return
}
}
Cancel the change,
function canceltdchanged ()
{
var Tdinitvalue=document.getelementbyid ("Tdinitvalue");
var Tdtxt=tdinitvalue.value;
var Tdid=document.getelementbyid ("Tdcag"). parentnode;
Tdid.innertext=trim (Tdtxt);
}
Determine the changes,
function Changetdtext ()
{
var Txtid=document.getelementbyid ("txtID");
if (txtid==null)
{
Return
}
var Tdid=document.getelementbyid ("Tdcag"). parentnode;
Tdid.innertext=trim (Txtid.value);
Return
}
Other code, same as before. Only Thead and tfoot changes to the table are canceled.
