Không thể tự động thêm hàng vào một số <TABLE> trong IE?

Tôi có một ứng dụng AJAX tải xuống một đối tượng JSON và sử dụng dữ liệu để thêm hàng vào một bảng HTML < > sử dụng các hàm Javascript DOM. Nó hoạt động hoàn hảo ... ngoại trừ trong Internet Explorer. IE không đưa ra bất kỳ lỗi nào, và tôi đã xác minh là tốt nhất có thể là mã đang được trình duyệt thực thi, nhưng nó không có hiệu lực. Tôi đã tạo trang nhanh và bẩn này để chứng minh sự cố:Không thể tự động thêm hàng vào một số <TABLE> trong IE?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"><head><title></title></head><body> 

<table id="employeetable"> 
    <tr> 
     <th>Name</th> 
     <th>Job</th> 
    </tr> 
</table> 

<script type="text/javascript"> 
    function addEmployee(employeeName, employeeJob) { 
     var tableElement = document.getElementById("employeetable"); 
     if (tableElement) { 
      var newRow = document.createElement("tr"); 
      var nameCell = document.createElement("td"); 
      var jobCell = document.createElement("td"); 
      nameCell.appendChild(document.createTextNode(employeeName)); 
      jobCell.appendChild(document.createTextNode(employeeJob)); 
      newRow.appendChild(nameCell); 
      newRow.appendChild(jobCell); 
      tableElement.appendChild(newRow); 
      alert("code executed!"); 
     } 
    } 

    setTimeout("addEmployee(\"Bob Smith\", \"CEO\");", 1000); 
    setTimeout("addEmployee(\"John Franks\", \"Vice President\");", 2000); 
    setTimeout("addEmployee(\"Jane Doe\", \"Director of Marketing\");", 3000); 
</script> 

</body></html>

Tôi chưa thử IE 8, nhưng cả IE 7 và IE 6 đều không hiển thị các hàng bổ sung được cho là được thêm vào. Tôi không hiểu tại sao. Có ai biết một workaround tốt cho vấn đề này, hoặc tôi có lẽ làm điều gì đó sai?

Nguồn

2009-05-01 Joshua Carmody

Bạn cần phải tạo một yếu tố tbody thêm TR mới của bạn và sau đó thêm tbody để bàn của bạn, như thế này:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"><head><title></title></head><body> 

<table id="employeetable"> 
    <tr> 
     <th>Name</th> 
     <th>Job</th> 
    </tr> 
</table> 

<script type="text/javascript"> 
    function addEmployee(employeeName, employeeJob) { 
     var tableElement = document.getElementById("employeetable"); 
     if (tableElement) { 
      var newTable = document.createElement('tbody'); // New 
      var newRow = document.createElement("tr"); 
      var nameCell = document.createElement("td"); 
      var jobCell = document.createElement("td"); 
      nameCell.appendChild(document.createTextNode(employeeName)); 
      jobCell.appendChild(document.createTextNode(employeeJob)); 
      newRow.appendChild(nameCell); 
      newRow.appendChild(jobCell); 
      newTable.appendChild(newRow); // New 
      tableElement.appendChild(newTable); // New 
      alert("code executed!"); 
     } 
    } 

    setTimeout("addEmployee(\"Bob Smith\", \"CEO\");", 1000); 
    setTimeout("addEmployee(\"John Franks\", \"Vice President\");", 2000); 
    setTimeout("addEmployee(\"Jane Doe\", \"Director of Marketing\");", 3000); 
</script> 

</body></html>

Nguồn

2009-05-01 19:01:24

thực sự, 'tableElement.getElementsByType ('tbody')' phải trả lại những gì mong muốn ở đây .... –

thực sự,

tableElement.getElementsByType('tbody')

nên trả về những gì mong muốn ở đây –

Xin lỗi các bạn, vẫn còn mới về sự khác biệt cú pháp bình luận/trả lời. Rõ ràng, muốn đặt định dạng kiểu mã trên đoạn mã. –

Chỉnh sửa: hiện đang hoạt động trong IE! insertSiblingNodesAfter sử dụng parentNode của anh chị em, mà sẽ xảy ra là một tbody trong IE

Thật khó để biết những gì quirks là trong cửa hàng khi bạn cố gắng để thao tác DOM qua trình duyệt. Tôi khuyên bạn nên sử dụng thư viện hiện có đã được kiểm tra đầy đủ trên tất cả các trình duyệt chính và tài khoản cho các quirks.

Cá nhân tôi sử dụng MochiKit, bạn có thể bổ nhào vào DOM thao tác ở đây: http://mochikit.com/doc/html/MochiKit/DOM.html

chức năng cuối cùng của bạn có thể trông như thế này:

function addEmployee(employeeName, employeeJob) { 
    var trs = getElementsByTagAndClassName("tr", null, "employeetable"); 
    insertSiblingNodesAfter(trs[trs.length-1], TR({}, TD({}, employeeName), TD({}, employeeJob)); 
    alert("code executed!"); 
}

Nguồn

2009-05-01 18:57:01 EoghanM

JQuery là một thay thế rất tốt để mã tay cán. – GalacticCowboy

+1 để sử dụng MochiKit (thư viện fave của tôi), nhưng bạn đã bỏ lỡ câu trả lời thực tế - anh ấy cần thêm các hàng vào một TBody cho IE để nhận ra các hàng. –

Tôi không nhận ra rằng appendChildNodes không hoạt động - Tôi đã sử dụng insertSiblingNodes trong mã của riêng tôi, hoạt động - Tôi đã cập nhật câu trả lời để phản ánh giải pháp làm việc. – EoghanM

Rõ ràng, trong IE bạn cần phải thêm hàng của bạn để phần tử TBody, không phải phần tử Bảng ... Xem phần thảo luận tại Ruby-Forum.

Mở rộng trên các cuộc thảo luận đó, bảng <> đánh dấu thường được thực hiện mà không rõ ràng < thead> và < tbody> đánh dấu, nhưng < tbody> ELEMENT là nơi bạn thực sự cần thêm hàng mới của bạn, như < table> không chứa trực tiếp các phần tử < tr.

Nguồn

2009-05-01 18:59:02

Phụ thêm vào tbody hoạt động liên tục trong tất cả các trình duyệt, vì vậy, bạn luôn có thể thực hiện việc này một cách an toàn. – JPot

Không thể tự động thêm hàng vào một số <TABLE> trong IE?

Trả lời

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