HTML의 편집 가능한 표에 문제가 있습니다.

HTML로 된 표가 있습니다. Javascript를 사용하여이 테이블을 편집 가능하도록 만들었습니다. 사용자가 셀을 클릭하면 편집 가능하게됩니다. 여기서 문제는 셀이 이미 편집 가능할 때, 사용자가 다시 셀 ...을 클릭하면 ...., 일부 태그 및 다른 것들이 나타납니다. 클릭 할 때마다 새로운 텍스트 상자가 나타납니다.HTML의 편집 가능한 표에 문제가 있습니다.

어떻게 예방할 수 있습니까?

다음 자바 스크립트 코드를 사용하고 있습니다. 새 텍스트 상자를 모든 클릭 한 후 나타나는 경우

function changeContent(tablecell) 
{ 
    //alert(tablecell.firstChild.nodeValue); 
    tablecell.innerHTML = "<INPUT type=text size=\"6\" name=newname onBlur=\"javascript:submitNewName(this);\" value=\""+tablecell.innerHTML+"\">"; 
    tablecell.firstChild.focus(); 
} 
function submitNewName(textfield) 
{ 
    //alert(textfield.value); 
    textfield.parentNode.innerHTML= textfield.value; 
}

출처

2010-07-16 Rajkumar

어떤 태그가 있습니까? 내가 생각하기에 더 구체적이어야 할 것이다. –

답변을 편집하고 코드를 포맷하여 편집 가능한 셀을 다시 클릭 할 때 나타나는 요소를 게시하십시오. – Zuul

죄송합니다. 나는 코드가 올바른 형식으로 표시되었다고 생각했다. 수정했습니다. – Rajkumar

, 코드 케이스 돌보는되지 않은 : 셀이 이미 입력 텍스트 상자가있는 경우, 다음 입력 텍스트 상자 추가 HTML을 계속 입력하지 않습니다 사용자가 셀을 클릭하면

이 문제를 방지하는 한 가지 방법은 changeContent 함수 끝에 "editable"과 같은 클래스 이름으로 테이블 셀의 클래스를 설정하는 것입니다. 그런 다음 tablecell.className이 "편집 가능"이 아닌 경우 입력 텍스트 상자에 HTML을 넣을 것과 동일한 함수에 코드를 포함 할 수 있습니다.

사용자가 편집을 완료 한 후에도 셀의 "편집 가능"클래스 이름을 제거하려면 submitNewName 함수를 기억하십시오.

출처

2010-07-27 07:08:56

HTML의 편집 가능한 표에 문제가 있습니다.

답변

관련 문제