2010-02-24 6 views
5

왜 다음 코드가 작동하지 않습니까? 인터넷 익스플로러 (EDIT에서 작동하지 않는 table 요소 또는 테이블 섹션 요소의 innerHTML 속성 (같은 tbody 또는 thead)를 설정 본인이 아는createElement를 사용하여 새 테이블을 만드는 방법은 무엇입니까?

<html> 
<head> 
    <script type="text/javascript"> 
    function addTable() { 
     var table = document.createElement('table'); 
     table.innerHTML = "<tr><td>123</td><td>456</td></tr>"; 
     document.getElementById("addtable").appendChild(table); 
    } 
    </script> 
</head> 
<body> 
    <input type="submit" value="New Table" onClick="addTable()"/> 
    <div id="addtable"></div> 
</body> 
</html> 

답변

21

는 : 난 그냥 확인 - ietester 및 일반 IE8로 결과는 "IE6 및 IE8에 대한"알 수없는 런타임 오류 "이며 IE7이 충돌하지만 IEtester 특정 문제 일 수 있습니다.)

테이블 또는 테이블 섹션 요소의 insertRow() 방법을 사용하는 테이블에 행을 추가 DOM standard 방법 (즉 DOM 사양에 HTMLTableElement 및 HTMLTableSectionElement 확인) : 스크립트

<script type="text/javascript"> 
function addTable() { 
    var c, r, t; 
    t = document.createElement('table'); 
    r = t.insertRow(0); 
    c = r.insertCell(0); 
    c.innerHTML = 123; 
    c = r.insertCell(1); 
    c.innerHTML = 456; 
    document.getElementById("addtable").appendChild(t); 
} 
</script> 

가있다 명시 적 테이블 섹션이 작성되지 않습니다. AFAIK, TBODY가 자동으로 생성되고 행이 여기에 삽입됩니다.

EDIT : IE와 관련하여 내용이있는 표를 추가하고 innerHTML 속성을 설정하여 모두 표를 추가 할 수 있지만 완전한 HTML 표가 있어야한다는 점을 지적해야합니다. 이것은 IE에서도 가능합니다 :

<script type="text/javascript"> 
function addTable() { 
    var html = "<table><tr><td>123</td><td>456</td></tr></table>"; 
    document.getElementById("addtable").innerHTML = html; 
} 
</script> 
+0

예, 실제로 런타임 오류가 발생합니다! 우리는이 방법, 또는 모든 tbody, tr, td에 대한 전통적인 생성/추가 사이클을 따라 가야합니다. – vpram86

+2

+1 모든 계정에서 수정합니다. 'innerHTML'은 IE에서'table'과'tbody'에 대해 읽기 전용입니다. –

+0

예, tbody는 IE에서 작동하지 않습니다. 하지만 코드는 또한 작동하지 않는 것 ... – yeeen

관련 문제