2012-02-23 2 views
0

document.formname.elements.length의 결과를 알리는 경우 mozilla는 다음 기능을 사용하여 동적으로 추가 한 요소를 고려하지 않습니다.mozilla의 javascript innerHTML

var rowCounter = 1; 

    for (i=0; i<oldIndex.length; i++) 
    { 
     newRow = tableToSort.insertRow((oldIndex.length+rowCounter)); 
     for (c=0; c<tableToSort.rows[i+1].cells.length; c++) 
     { 
      newCell = newRow.insertCell(c); 
      newCell.innerHTML = tableToSort.rows[oldIndex[i]].cells[c].innerHTML; 
      newCell.className="tblfirstcol"; 

     } 
     rowCounter++; 
     } 

여기의 문제점은 무엇입니까?

+0

모질라 (소프트웨어)는 50 년 동안 죽었습니다. Firefox 란 뜻입니까? – Quentin

+0

ohhhhhh yes firehome을 의미합니다. – chetan

+0

테스트 케이스를 확장해야 할 때 FF로 잘 작동하는 새 셀에 할당 컨트롤 요소를 할당하는 경우 –

답변

0

거의 모든 브라우저는 문서에 붙여 넣은 요소를 무시합니다. innerHTML, 도중에 또는 다른 것 (느슨한 ID 등).

  1. 먼저 문서에 요소를 생성해야하고 appendChild() 방법으로 newCell에 추가합니다.

  2. oldIndex[i]의 셀을 페이지에서 제거해야하는 경우 swapNodes() -method를 사용할 수도 있습니다.

내가 테스트하는 것

, oldIndex[i]에서 셀의 HTML은 전체 요소로 복사 할 수 있다면. 그래서, 내가 돌아올거야 ...

글쎄,이 대답을 모두 잊어 버려. 이것은 작동해야하며 innerHTML을 입력 한 행 대신이 두 행을 newCell에 입력하십시오.

var cellContent = tableToSort.rows[oldIndex[i]].cells[c].cloneNode(true); 
newCell=newRow.appendChild(cellContent); 

OOPS! 코드는 전체 셀을 추가합니다. 수정 됨. 이제 원래 newCell 정의도 생략하십시오.

+0

체크 박스가있는 첫 번째 열에는 체크 박스가 표시되지 않으므로 테이블이 매우보기 흉하게 보입니다. – chetan

0

form.elements는 양식 제출 알고리즘에서 발생하는 양식의 요소 만 참조합니다. 따라서 폼에 다른 P 요소를 추가하면 form.elements.length가 증가하지 않습니다. 그래도 INPUT 요소를 추가하면 그렇게됩니다.

다음과 같이 경고 메시지에 1, 2, 3이 표시됩니다. 마지막 단계에서는 innerHTML과 함께 INPUT 요소를 삽입합니다.

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title></title> 
     <script> 
      window.addEventListener("DOMContentLoaded", function() { 
       var form = document.forms.test; 
       alert(form.elements.length); 
       var table = form.getElementsByTagName("table")[0]; 
       var row = table.insertRow(-1); 
       var cell = row.insertCell(-1); 
       cell.appendChild(document.createElement("input")); 
       alert(form.elements.length); 
       var another_row = table.insertRow(-1); 
       var another_cell = another_row.insertCell(-1); 
       another_cell.innerHTML = "<input>"; 
       alert(form.elements.length); 
      }, false); 
     </script> 
    </head> 
    <body> 
     <form name="test"> 
      <table> 
       <tbody> 
        <tr> 
         <td><input></td> 
        </tr> 
       </tbody> 
      </table> 
     </form> 
    </body> 
</html>