5

I looked at some other questions like this one but they don't address this particular issue:

When I run this code in IE (8):

$("<tr><td>1</td><td>A</td></tr>").appendTo("#myTable tbody");

I end up with this HTML being added to the table's body:

<TR>
1</TD><//TD>
<TD>
</TD>
A</TD><//TD></TR><//TR>
</TR>

Any idea? Thanks in advance.

Community
  • 1
  • 1
Ariel
  • 5,752
  • 5
  • 49
  • 59
  • I don't know how jquery implements this, but if you can't get it to work with this particular construct, this may be of help: http://stackoverflow.com/questions/2324782/using-createelement-to-create-a-new-table/2324826#2324826 – Roland Bouman Feb 24 '10 at 20:43
  • FYI works fine in IE7 and FF3.5 – KP. Feb 24 '10 at 20:52

2 Answers2

1

What you're trying to do is really difficult to do correctly. This is because a <TR> element is meaningless outside the scope of a <TABLE>. While interpreting your intent is easy for us humans, it's very possible that jQuery is not smart enough to do it, and do the right thing.

The right thing here would be something like:

var tbody = document.getElementById('myTable').getElementsByTagName('tbody')[0];
var row = document.createElement('tr');
tbody.appendChild(row);
var cell = document.createElement('td');
cell.innerHTML = '1';
row.appendChild(cell);
cell = document.createElement('td');
cell.innerHTML = 'A';
row.appendChild(cell);

Now the code in your question is admittedly much more compact, but that doesn't mean that jQuery will need to do much less work behind the scenes to actually achieve desired results.

levik
  • 114,835
  • 27
  • 73
  • 90
1

try

$("#myTable tbody").append("<tr><td>1</td><td>A</td></tr>");

it'sthe same, but it does totally different things inside the jQuery

naugtur
  • 16,827
  • 5
  • 70
  • 113