Home/ Questions/Q 696807
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T03:06:11+00:00

I’m using some code to build up tables using JQuery, but in Firefox 3.5.3

  • 0

I’m using some code to build up tables using JQuery, but in Firefox 3.5.3 on Mac OSX, the table cells all appear on separate lines by themselves, instead of in their respective rows. Chrome 5.0.342.7 beta on OSX correctly produces the table, as does Safari 4.0.5.

Here is a minimal reproduction case:

<html>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function()
{
    var b = $('body');
    b.append("<table>");
    for (var i = 0; i < 3; ++i)
    {
        b.append("<tr>");
        for (var j = 0; j < 3; ++j)
            b.append("<td>x</td>");
        b.append("</tr>");
    }
    b.append("</table>");
});
</script>
</body>
</html>

In Chrome and Safari, I get this correct output:

x x x
x x x
x x x

but Firefox produces:

x
x
x
x
x
x
x
x
x

Note that if I manually create that exact table without using Javascript (i.e. direct into the HTML) then the table appears correctly in Firefox. Also, if I change the JS to append then entire table in one call then it also works — the only time it doesn’t work is if you append it part-by-part as I have done before.

My question is: is this to be expected, or should I report this as a bug to Firefox? I’m pretty sure this is a Firefox bug, but I’m a bit of a newbie to JS and web development in general, so perhaps there’s something I’m missing?

P.S. obviously there are easy ways to get around this — that’s not my concern. See above.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0