js는 테이블의 Td 값을 수정합니다(td의 클릭 이벤트 정의)_javascript 기술
- WBOY원래의
- 2016-05-16 17:44:081424검색
프로젝트가 완료된 후 테스트 및 승인 중에 사용자가 갑자기 인쇄를 용이하게 하기 위해 쿼리 결과를 변경할 수 있다고 제안했습니다. 엔지니어링 오류를 숨깁니다. 그런데 이때 요청을 하는 게 머리가 아팠어요. 나중에 생각해보니 이런 식으로 프로젝트의 JS 파일에 다음과 같은 기능만 추가하면 문제가 될 수 있거든요. 해결되었습니다.
코드 복사 코드는 다음과 같습니다.
/*
페이지가 다음과 같은 경우 로드된 각 td에 대해 클릭 이벤트를 추가하므로 각 페이지를 변경할 필요가 없습니다.
*/
함수 ReWritable()
{
var tbmian=document.getElementById("tbmain")
for(var i=0;i
for(var j=0;j
/*
클릭 이벤트 속성을 추가합니다. 여기서는 setAttribute 메소드를 사용할 수 없습니다.
*/
tbmain.rows[i].cells[j].onclick=AddObjOfText;
}
}
}
/*
클릭 이벤트, Td 추가 콘텐츠는 사용자가 새로운 Td 값을 입력할 수 있는 텍스트,
확인 버튼, 사용자 입력을 저장하거나 취소할 수 있는 취소 버튼이 로드된 Div로 업데이트됩니다.
사용자가 새 값을 입력하기 전에 Td 값을 저장하여 사용자가 취소할 때 복원할 수 있도록 하는 Hidden입니다.
*/
function AddObjOfText()
{
var tdcag=document.getElementById("tdcag")
if(tdcag!=null)
{
return;
}
var tdid=window.event.srcElement;
var tdtxt=tdid.innerText
var str="
";
str ="";
str =""
str ="";
str ="
"; str ="";
str =""
str ="";
str ="
tdid.innerHTML=str;
}
/*
변경을 취소하고 숨김 값을 할당합니다. Td
*/
function CancelTdChanged()
{
var tdInitValue=document.getElementById("tdInitValue")
var tdtxt=tdInitValue.value; getElementById ("tdcag").parentNode;
tdid.innerText=tdtxt;
}
/*
사용자 변경 사항을 저장하고 Td에 텍스트 값 할당
*/
함수 ChangeTdText ( )
{
var txtId=document.getElementById("txtId");
var tdid=document.getElementById("tdcag").parentNode
tdid.innerText=txtId.value; 🎜 >}
이런 방식으로 페이지의 에 onload 이벤트를 추가하고 해당 값을 ReWritable()에 할당합니다.
코드 복사 코드는 다음과 같습니다.
>| 11 | >12 | 13 |
| 22 | 23 | ; |
| 31 | 33 > |