innerHTML無法在IE7上的表格行元素上工作？

請檢查下面的例子：http://jsfiddle.net/lulu2792/a9LZd/innerHTML無法在IE7上的表格行元素上工作？

我使用innerHTML設置錶行內容（包括單元格內容），我在Firefox & Chrome的運行情況良好。但是，它在IE7上有一個錯誤（也在IE9兼容模式下）。表格HTML的結果是：

<TABLE id=table1> 
<TBODY> 
    <TR> 
    <TD> 
    Test 
    </TD> 
    </TR> 
    <TR> 
    ABC 
    </TD> 
    </TR> 
</TBODY> 
</TABLE>

請關注第2行，它有一個錯誤。我不明白爲什麼innerHTML會導致IE7上的這個錯誤。如何糾正這個問題？

而且我也有一個問題：如果我不使用TBODY標籤的表格元素中是這樣的：

var html = "<table id='table1'><tr><td>Test</td></tr></table>";

瀏覽器仍然呈現此標籤。

請幫我解答2上面的問題。謝謝。

來源

2012-09-27 Leo Vo

你的代碼沒有意義。 'var s = tr.innerHTML; tr.innerHTML = s'。將內部html設置爲某些內容，將tr設置爲自身，然後使用固定字符串摧毀所有內容和東西？ –

我給出了這個上下文，以便你很容易看到這個問題。首先，tr.innerHTML是有效的HTML - >我將它分配給變量's'。在我沒有任何改變的情況下重新分配給tr.innerHTML之後。顯然，tr.innerHTML有變化。我不知道爲什麼。 –

您不能使用innerHTML屬性在IE中編寫表的某些部分，您必須使用DOM方法。 innerHTML可用於寫入整個表格或單元格的內容。

在MSDN上有一個示例：Building Tables Dynamically。

還有在MDN一個例子：因爲它創造了整個表

// create table 
var html = "<table id='table1'><tbody><tr><td>Test</td></tr></tbody></table>"; 
document.getElementById('div1').innerHTML = html;

這工作正常：Using the DOM Table Interface

在你發佈在其他地方的代碼（好得多它張貼在這裏）。

// append a row into table 
var tr = document.createElement('tr'); 
var td = document.createElement('td'); 
td.innerHTML = 'ABC'; 
tr.appendChild(td); 
var s = tr.innerHTML;

上述工作在所有瀏覽器中都正常。

tr.innerHTML = s;

只能分配給單元格的內部HTML（td或th），而不能分配給表的任何其他部分。

tr.innerHTML = '<td>' + 'ABC' + '</td>';

再次相同。

var tbody = document.getElementById('table1').getElementsByTagName('tbody')[0];

可以使用tBodies屬性簡化：

var tbody = document.getElementById('table1').tBodies[0]; 
tbody.appendChild(tr);

這將正常工作，如果你沒有通過tr的innerHTML混亂。

請注意，你也可以這樣做：

var tbody = document.getElementById('table1').tBodies[0]; 
var row = tbody.insertRow(-1); 
var cell = row.insertCell(-1); 
cell.innerHTML = 'whatever';

大功告成。您也可以克隆整行，然後使用innerHTML修改單元格內容。

來源

2012-09-27 03:34:34 RobG

Internet Explorer在將HTML附加到表中時存在着臭名昭着的問題。最好的解決方案是使用第三方庫，它可以跨瀏覽器規範行爲（如jQuery，但還有其他）。

jQuery的例子：

// invokes a function when document is ready 
// dollar symbol is "jQuery" alias inside function 
jQuery(function($) { 
    // select the table body and append a new row 
    $('#table1 tbody').append('<tr><td>ABC</td></tr>'); 
});

嘿同樣，第二排缺少<td>開始標記。你的第二個問題：不需要tbody（我相信XHTML需要它，如果你有一個tad和tad）。

來源

2012-09-27 03:31:34

請檢查此：http://jsfiddle.net/lulu2792/qYFTy/您嘗試在任何瀏覽器上運行它。 tbody標籤總是在表格元素內部創建的。 –

這很正常。請參閱[這個答案]（http://stackoverflow.com/a/1681427/159570）瞭解更多信息。我只是在談論源HTML。 –

請注意，表格中必須包含「tbody」元素，但標記是可選的。 – RobG

innerHTML無法在IE7上的表格行元素上工作？

回答

相關問題