js는 테이블의 Td 값을 수정합니다(td의 더블 클릭 이벤트 정의)_javascript 기술

고객의 요구가 최우선입니다.
이번에는 '확인'과 '취소' 버튼이 없어진 코드가 변경되었습니다. 싱글 클릭 이벤트를 더블 클릭 이벤트로 변경하고, 사용자는 ESC 키를 눌러 변경을 취소합니다.

코드 복사 코드는 다음과 같습니다.

//더블클릭 이벤트 추가 각 Td
function ReWritable()
{
var tbmian=document.getElementById("tbmain")
//Loop, 각 행과 열에 대해 두 번 클릭 이벤트를 추가합니다. 행(thead)과 마지막 행(tfoot)은 추가되지 않습니다.
for(var i=1;i{
for(var j=0;j{
tbmain.rows[i].cells[j].ondblclick=TdDoubleClick;
}
}
}
//td의 더블클릭 이벤트를 정의하고 add it 사용자가 입력할 수 있는 텍스트 상자입니다.
function TdDoubleClick()
{
//먼저 사각형에 텍스트 상자가 이미 있는지 확인합니다. 텍스트 상자가 있으면 반환하고 텍스트 상자를 반복적으로 추가하지 않습니다. 존재하지 않는 경우 추가하십시오.
var tdcag=document.getElementById("tdcag");
var tdid=null;
var txtid=null;
if(tdcag! =null)//이미 존재합니다. 반환합니다.
{
return;
}
//없으면
tdid=window.event.srcElement;
tdtxt=tdid.innerText; Trim( tdtxt);
var str="

";
str ="";
str ="

";
tdid.innerHTML=str;
//텍스트 상자에 포커스를 둡니다.
document.getElementById("txtId").focus();
var ctr=document.getElementById("txtId").createTextRange()
ctr.collapse(false); select();
}
//문자열 앞뒤의 공백을 제거합니다.
function Trim(str)
{
return str.replace(/(^s*)|(s*$)/g, "")
}
//KeyPress 정의 눌렀을 때의 이벤트가 ESC 키일 경우 변경을 취소하고 변경 전 값으로 복원합니다.
document.onkeypress = function EscKeyPress()
{
if(event.keyCode==27)
{
CancelTdChanged()
return; }
//변경 취소,
function CancelTdChanged()
{
var tdInitValue=document.getElementById("tdInitValue")
var tdtxt=tdInitValue.value
var tdid; =document.getElementById("tdcag").parentNode;
tdid.innerText=Trim(tdtxt);
}
//변경 확인,
function ChangeTdText()
{
var txtId=document.getElementById("txtId");
if(txtId==null)
{
return;
}
var tdid=document.getElementById("tdcag") . parentNode;
tdid.innerText=Trim(txtId.value);
return;
}


기타 코드는 이전과 동일합니다. 테이블의 Thead 및 Tfoot에 대한 변경 사항을 취소하면 됩니다.

코드 복사

코드는 다음과 같습니다.

thead,thead

tfoot, tfoot,tfoot



;td> 21


tr>

11 /td>	12	13
22
31	32	33 🎜>