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

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

WBOY

풀어 주다： 2016-05-16 17:44:10

원래의

1661명이 탐색했습니다.

고객의 요구가 최우선입니다.
이번에는 '확인'과 '취소' 버튼이 없어진 코드가 변경되었습니다. 싱글 클릭 이벤트를 더블 클릭 이벤트로 변경하고, 사용자는 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에 대한 변경 사항을 취소하면 됩니다.

코드 복사

코드는 다음과 같습니다.

< td>thead,thead

tfoot, tfoot,tfoot

;td> 21

tr>

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