Não é possível adicionar linhas dinamicamente a uma <TABLE> no I
Tenho um aplicativo AJAX que baixa um objeto JSON e usa os dados para adicionar linhas a uma <table> HTML usando as funções DOM Javascript. Funciona perfeitamente ... exceto no Internet Explorer. O IE não apresenta nenhum tipo de erro e verifiquei da melhor maneira possível que o código está sendo executado pelo navegador, mas simplesmente não tem efeito. Eu criei esta página rápida e suja para demonstrar o problema:
<!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>
Não tentei o IE 8, mas o IE 7 e o IE 6 não mostram as linhas adicionais que supostamente estão sendo adicionadas. Não consigo entender o porquê. Alguém conhece uma boa solução alternativa para esse problema ou talvez eu esteja fazendo algo errado?