無法動態地將行添加到IE中的<TABLE>？

我有一個AJAX應用程序，它下載一個JSON對象並使用這些數據將行添加到使用Javascript DOM函數的HTML <表>。它完美的工作...除了在Internet Explorer中。 IE並沒有給出任何錯誤，並且我儘可能地驗證了代碼正在被瀏覽器執行，但它沒有任何效果。我創造了這個快速和骯髒的網頁來演示該問題：無法動態地將行添加到IE中的<TABLE>？

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

我沒試過IE 8，但兩者IE 7和IE 6並不表明理應被添加額外的行。我無法理解爲什麼。有誰知道這個問題的一個很好的解決方法，或者我可能做錯了什麼？

來源

2009-05-01 Joshua Carmody

你需要創建一個TBODY元素到新TR增加，然後TBODY添加到您的表，這樣的：

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

來源

2009-05-01 19:01:24

編輯：現在在IE中工作！ insertSiblingNodesAfter使用的兄弟姐妹，這恰好是一個TBODY在IE

很難知道什麼怪癖在商店當您嘗試操作DOM的跨瀏覽器的parentNode。我建議您使用已經在所有主流瀏覽器中進行全面測試的現有庫，並解釋怪癖。

我個人使用MochiKit，你可以潛入DOM操作位置： http://mochikit.com/doc/html/MochiKit/DOM.html

您的最終功能可能是這個樣子：

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

來源

2009-05-01 18:57:01 EoghanM

JQuery的是手工代碼另外一個非常不錯的選擇。 – GalacticCowboy 2009-05-01 19:13:02

+1使用MochiKit（我的fave庫），但你錯過了實際的答案 - 他需要追加行到IE的TBody來識別行。 – 2009-05-01 20:09:26

我沒有意識到appendChildNodes不工作 - 我一直在我自己的代碼中使用insertSiblingNodes，這是可行的 - 我已經更新了答案以反映工作解決方案。 – EoghanM 2009-05-01 20:53:52

顯然，在IE中您需要將行追加到TBody元素，而不是表格元素... 請參閱Ruby-Forum的討論。

展開的討論那裏，<表>標記一般是做沒有明確< THEAD>和< TBODY>標記，但< TBODY>元素是你真正需要添加新行，作爲<表>不直接包含< tr>元素。

來源

2009-05-01 18:59:02

無法動態地將行添加到IE中的<TABLE>？

回答

相關問題