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.
