Menu
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> 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?
939
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> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
