不能动态添加行与＆lt;表＆gt;在IE浏览器？ [英] Can't dynamically add rows to a <TABLE> in IE?
问题描述
我有一个AJAX应用程序，下载一个JSON对象，并使用这些数据行添加到HTML＆LT;表＆gt;使用JavaScript DOM功能。它完美......除了在Internet Explorer中。 IE浏览器不提供任何类型的错误，而且我的最好的验证，我可以说的code是由浏览器执行，但它根本没有任何效果。我创造了这个快速和肮脏的页面来说明这个问题：
I have an AJAX application that downloads a JSON object and uses the data to add rows to an HTML <table> using Javascript DOM functions. It works perfectly... except in Internet Explorer. IE doesn't give any sort of error, and I've verified as best as I can that the code is being executed by the browser, but it simply has no effect. I created this quick and dirty page to demonstrate the problem:
<!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并不表明理应被添加了额外的行。我无法捉摸为什么。有谁知道一个很好的办法解决这个问题，还是我可能做错了什么？
I haven't tried IE 8, but both IE 7 and IE 6 do not show the additional rows that are supposedly being added. I can't fathom why. Does anyone know a good workaround to this problem, or am I perhaps doing something wrong?
推荐答案
您需要创建一个TBODY元素到新TR增加，然后TBODY添加到您的表，像这样的：
You need to create a TBODY element to add your new TR to and then add the TBODY to your table, like this:
<!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>
这篇关于不能动态添加行与＆lt;表＆gt;在IE浏览器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
