ansaurus

Question

Javascript table construction bug using JQuery in Firefox on Mac OSX

Answer 1

+1 A:

I don't think it makes sense to append the <tr> elements to the body - they're supposed to be inside the table. When you append the <table> element, you're appending a complete table element. To then add random table rows after that really makes no sense.

Do this instead:

var b = $('body'), t = $('<table/>');
for (var i = 0; i < 3; ++i) {
  var tr = $('<tr/>');
  for (var j = 0; j < 3; ++j) tr.append($('<td/>').text("x"));
  t.append(tr);
}
b.append(t);

That way, you're appending the table cell elements to each row, appending each row to the table, and finally appending the table to the body.

Pointy 2010-03-28 21:18:03

That's totally besides the point.

Peter Alexander 2010-03-28 21:19:16

No, it is **not** "beside the point". Do you actually know how the "append()" function works? You're here asking for help, and I'm trying to give it to you. Don't be so rude.

Pointy 2010-03-28 21:19:20

It does work, just not in Firefox.

Peter Alexander 2010-03-28 21:21:49

Answer 2

+1 A:

You are trying to do to much that jQuery will handle for you try doing this:

var table = $("<table>");
for (var i = 0; i < 3; ++i) {
    var tr = $("<tr>").appendTo(table);
    for (var j = 0; j < 3; ++j)
        $("<td>x</td>").appendTo(tr);
}
table.appendTo('body');

jQuery will handle creating a DOM fragment for you and create your elements for you.

PetersenDidIt 2010-03-28 21:19:18

Right! The "append" function is *not* about adding fragments of HTML source code to something, as the OP seems to have erroneously concluded.

Pointy 2010-03-28 21:25:41

ansaurus

tags:

views:

answers:

Javascript table construction bug using JQuery in Firefox on Mac OSX

related questions