cloneNode가 작동하지 않는 상태에서 innerhtml 변경

50 개의 행이있는 테이블이 있습니다. 각 행의 마지막 셀은 이미지로, 특정 행의 각 셀에있는 텍스트 상자를 클릭하면 사용자가 값을 편집 할 수 있습니다. 이를 위해 이미지를 클릭 할 때 자바 스크립트를 작성했습니다. 특정 행으로 이동하여 각 td의 innerHTML을 텍스트 상자로 변경합니다.cloneNode가 작동하지 않는 상태에서 innerhtml 변경

function insertEdittableRow(ids){ 
    var row = $(ids).closest("tr"); 

    var tdvar = row.find('td[class=mainServer]')[0]; 

     var servname = tdvar.innerHTML.trim(); 

     tdvar.innerHTML = "'<'INPUT id=updServerName class=TextBoxStyle value='" + servname 
       +"' type=text name=updServerName/> "; 

    }

잘 작동합니다. 내가하고 싶은 두 번째 단계는 정렬이었다.

테이블 헤더를 클릭하면 표가 정렬됩니다. 그리고 정렬 자바 스크립트가 이렇게 간다. 모든 행을 사용하여 이전 색인 (rownumber)이있는 배열에 넣고 정렬을 수행합니다. 그런 다음 배열을 반복하고 새로운 정렬 된 tbody를 만듭니다. 테이블의 이전 정렬되지 않은 tbody는이 새로운 정렬 된 것으로 대체됩니다.

for(var i=0, len=arrayOfRows.length; i'<'len; i++) { 
     newTableBody.appendChild(rows[arrayOfRows[i].oldIndex].cloneNode(true)); 
    } 

    table.replaceChild(newTableBody,tbody);

이 또한 정상적으로 작동합니다.

하지만 문제는 이제 첫 번째 부분에서 설명한대로 마지막 셀의 이미지 버튼을 클릭하면 작동하지 않습니다. 그 자바 스크립트 함수에 디버거를 넣고 거기에 도달하고 텍스트를 형성하고 마지막 td의 innerHTML에 할당하지만, 페이지에서 텍스트 상자를 볼 수 없습니다.

요약하면 텍스트 상자는 정렬 전에 innerHTML로 삽입되지만 cloneNode로 정렬 한 다음 새 정렬 된 tBODY를 만들고 테이블에 삽입하면 innerHTML 할당이 작동하지 않습니다.

도움을 주시면 감사하겠습니다.

출처

2012-09-18 Jeevan

해결 방법으로 정렬하는 동안 cloneNode를 중지했습니다. 대신 나는 행의 각 셀에 대해 createElement 및 appendChild를 수행하고 행을 tbody에 추가합니다 – Jeevan

해결 방법으로, 정렬하는 동안 cloneNode를 중지했습니다. 대신 행의 각 셀에 대해 createElement 및 appendChild를 수행하고 행을 tbody에 추가합니다.

출처

2012-09-20 14:20:55 Jeevan

cloneNode가 작동하지 않는 상태에서 innerhtml 변경

답변

관련 문제