Can't dynamically add rows to a <TABLE> in IE?

StackOverflow https://stackoverflow.com/questions/812693

Question

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?

Was it helpful?

Solution

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>

OTHER TIPS

Apparently, in IE you need to append your row to the TBody element, not the Table element... See discussion at Ruby-Forum.

Expanding on the discussion there, the <table> markup is generally done without explicit <thead> and <tbody> markup, but the <tbody> ELEMENT is where you actually need to add your new row, as <table> does not contain <tr> elements directly.

Edit: now works in IE! insertSiblingNodesAfter uses the parentNode of the sibling, which happens to be a tbody in IE

It's hard to know what quirks are in store when you try to manipulate the DOM cross-browser. I'd recommend that you use an existing library that has been fully tested across all major browsers, and accounts for quirks.

Personally I use MochiKit, you can dive into DOM manipulation here: http://mochikit.com/doc/html/MochiKit/DOM.html

Your final function might look something like this:

function addEmployee(employeeName, employeeJob) {
    var trs = getElementsByTagAndClassName("tr", null, "employeetable");
    insertSiblingNodesAfter(trs[trs.length-1], TR({}, TD({}, employeeName), TD({}, employeeJob));
    alert("code executed!");
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top