js modifies the value of Td in the table (defining the double-click event of td)

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

WBOY

Release： 2016-05-16 17:44:10

Original

1691 people have browsed it

Customer needs come first.
This time is the changed code, removing the "OK" and "Cancel" buttons. Change the single-click event to a double-click event, and the user presses the ESC key to cancel the change.

Copy code The code is as follows:

//Add a double-click event for each Td
function ReWritable()
{
var tbmian=document.getElementById("tbmain");
//Loop, add a double-click event for each row and column, but the first row (thead) and the last row (tfoot) is not added.
for(var i=1;i{
for(var j=0;j{
tbmain.rows[i].cells[j].ondblclick=TdDoubleClick;
}
}
}
//Define the double-click event of td and add it A text box that the user can enter.
function TdDoubleClick()
{
//First determine whether a text box already exists in the square. If it exists, return and do not add a text box repeatedly. If it does not exist, add it.
var tdcag=document.getElementById("tdcag");
var tdid=null;
var txtid=null;
var curtd=window.event.srcElement;
if(tdcag! =null)//Already exists, return.
{
return;
}
//If it does not exist, add
tdid=window.event.srcElement;
tdtxt=tdid.innerText;
tdtxt=Trim( tdtxt);
var str="

";
str ="";
str ="

";
tdid. innerHTML=str;
//Give the text box focus.
document.getElementById("txtId").focus();
var ctr=document.getElementById("txtId").createTextRange();
ctr.collapse(false);
ctr. select();
}
//Remove spaces before and after the string.
function Trim(str)
{
return str.replace(/(^s*)|(s*$)/g, "");
}
//Define KeyPress The event when pressed, if it is the ESC key, cancels the change and restores to the value before the change.
document.onkeypress = function EscKeyPress()
{
if(event.keyCode==27)
{
CancelTdChanged();
return;
}
}
//Cancel changes,
function CancelTdChanged()
{
var tdInitValue=document.getElementById("tdInitValue");
var tdtxt=tdInitValue.value;
var tdid =document.getElementById("tdcag").parentNode;
tdid.innerText=Trim(tdtxt);
}
//Confirm the change,
function ChangeTdText()
{
var txtId=document.getElementById("txtId");
if(txtId==null)
{
return;
}
var tdid=document.getElementById("tdcag"). parentNode;
tdid.innerText=Trim(txtId.value);
return;
}

Other codes are the same as before. Just cancel the changes to Thead and Tfoot of the table.

Copy code The code is as follows:

 
  thead ,thead,thead 
   
tfoot, tfoot,tfoot 
 






 



< ;/td>

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