Làm thế nào để sử dụng createElement để tạo một bảng mới?

Tại sao mã sau không hoạt động?Làm thế nào để sử dụng createElement để tạo một bảng mới?

<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>

Nguồn

2010-02-24 yeeen

Để theo sự hiểu biết của tôi, thiết lập thuộc tính innerHTML của một yếu tố table yếu tố hoặc phần bảng (như tbody hoặc thead) không hoạt động trên trình duyệt Internet Explorer (EDIT: Tôi chỉ cần kiểm tra - với ietester và đồng bằng IE8 Kết quả là "lỗi thời gian chạy không xác định" cho IE6 và IE8, và nó treo IE7 nhưng đó có thể là một vấn đề cụ thể của IEtester).

Cách DOM standard thêm hàng vào bảng được sử dụng phương pháp insertRow() trên bàn hoặc phần bảng nguyên tố (tìm HTMLTableElement và HTMLTableSectionElement ở chỗ DOM spec):

<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>

Trong kịch bản, có không có phần bảng rõ ràng nào được tạo. AFAIK, một TBODY được tạo tự động và các hàng được chèn vào đó.

EDIT: liên quan đến IE, tôi nên chỉ ra rằng bạn có thể thêm bảng có nội dung và tất cả bằng cách đặt thuộc tính innerHTML, nhưng html bạn đưa vào trong đó phải là bảng đầy đủ. Vì vậy, tính năng này hoạt động, ngay cả trên 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>

Nguồn

2010-02-24 09:18:01

Vâng, thực tế, nó sẽ phát lỗi thời gian chạy! Chúng ta nên đi theo phương pháp này, hoặc tạo ra/nối thêm chu kỳ cho tất cả các tbody, tr và td. – vpram86

+1 Đúng trên tất cả các tài khoản. 'innerHTML' là chỉ đọc cho' table' và 'tbody' trong IE. –

ya, tbody không hoạt động trong IE. Nhưng mã u đã cho cũng không có vẻ làm việc ... – yeeen

Làm thế nào để sử dụng createElement để tạo một bảng mới?

Trả lời

Các vấn đề liên quan