Can't dynamically add rows to a in IE?

Asked May 01 '09 at 18:47

Active Sep 24 '16 at 18:39

Viewed 1.2k times

21

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?

javascript ajax internet-explorer cross-browser html-table

edited Sep 24 '16 at 18:39
Brian Tompsett - 汤莱恩

5,753

72

57

129

asked May 01 '09 at 18:47
Joshua Carmody

13,410

16

64

83

3 Answers3

17

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>

answered May 01 '09 at 19:01
Wally Lawless

7,539

7

37

53

3

actually, `tableElement.getElementsByType('tbody')` should return what is desired here.... – Tetsujin no Oni May 01 '09 at 19:04

actually,
tableElement.getElementsByType('tbody')
should return what is desired here – Tetsujin no Oni May 01 '09 at 19:05

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 May 01 '09 at 19:05

4

I realize this is an old post, but since others may still use it for reference, the above comment didn't work for me. What worked for me was `tableElement.getElementsByTagName('tbody')[0]` – Travesty3 Mar 11 '11 at 19:54

@Wally: I tried adding `
` in my [demo](http://jsfiddle.net/abhisheksimion/LSh4M/13/) but still it does not seem to work on IE, my [question](http://stackoverflow.com/questions/6606523/dynamic-table-is-not-visible-in-ie-8/6606659#6606659) – Jul 07 '11 at 06:49

8

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.

answered May 01 '09 at 18:59
Tetsujin no Oni

7,300

2

29

46

3

Appending to tbody works consistently in all browsers, so it is safe to do it always. – JPot May 01 '09 at 20:11

2

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

edited May 01 '09 at 20:52

EoghanM

answered May 01 '09 at 18:57
EoghanM

25,161

23

90

123

+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 May 01 '09 at 20:09

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 May 01 '09 at 20:53

Linked

1
HTA append table row

4
Silverlight HTML Bridge printing window.print() blank pages

1
table elements not showing in IE

0
Update (ajax) only part of table without affecting whole table

0
Dynamic table not working in Internet Explorer

3
how to display array values inside <table> tag?

5
Javascript: issue when dynamically adding a row from its HTML to a table in IE

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?

score 17 · Accepted Answer · answered May 01 '09 at 19:01

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>

actually, `tableElement.getElementsByType('tbody')` should return what is desired here.... — Tetsujin no Oni, May 01 '09 at 19:04
actually,
tableElement.getElementsByType('tbody')
should return what is desired here — Tetsujin no Oni, May 01 '09 at 19:05
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, May 01 '09 at 19:05
I realize this is an old post, but since others may still use it for reference, the above comment didn't work for me. What worked for me was `tableElement.getElementsByTagName('tbody')[0]` — Travesty3, Mar 11 '11 at 19:54

score 8 · Answer 2 · answered May 01 '09 at 18:59

8

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.

answered May 01 '09 at 18:59

Tetsujin no Oni

7,300
2
29
46

3

Appending to tbody works consistently in all browsers, so it is safe to do it always. – JPot May 01 '09 at 20:11

EoghanM · Answer 3 · 2009-05-01T20:52:40.193

2

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

edited May 01 '09 at 20:52

answered May 01 '09 at 18:57

EoghanM

25,161
23
90
123

+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 May 01 '09 at 20:09
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 May 01 '09 at 20:53