ansaurus

Question

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

Answer 1

+1 A:

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!");
}

EoghanM 2009-05-01 18:57:01

JQuery is another very good alternative to hand-rolled code.

GalacticCowboy 2009-05-01 19:13:02

+1 for using MochiKit (my fave library), but you missed the actual answer - he needs to append rows to a TBody for IE to recognize the rows.

Jason Bunting 2009-05-01 20:09:26

I didn't realise that appendChildNodes wasn't working - I had been using insertSiblingNodes in my own code, which works - I've updated the answer to reflect a working solution.

EoghanM 2009-05-01 20:53:52

Answer 2

+3 A:

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.

Tetsujin no Oni 2009-05-01 18:59:02

Appending to tbody works consistently in all browsers, so it is safe to do it always.

JPot 2009-05-01 20:11:56

Answer 3

+3 A:

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"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;title&gt;&lt;/title&gt;&lt;/head&gt;&lt;body&gt;

<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>

Wally Lawless 2009-05-01 19:01:24

actually, `tableElement.getElementsByType('tbody')` should return what is desired here....

Tetsujin no Oni 2009-05-01 19:04:36

actually, <pre>tableElement.getElementsByType('tbody')</pre> should return what is desired here

Tetsujin no Oni 2009-05-01 19:05:00

Sorry guys, still kinda new on the comment / answer syntax differences. Obviously, wanted to put code-style formatting on the code fragment.

Tetsujin no Oni 2009-05-01 19:05:38

ansaurus

tags:

views:

answers:

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

related questions