代码之家 › 专栏 › 技术社区 › Peter Alexander

在mac osx上的firefox中使用jquery构建javascript表的错误

html-table firefox html jquery javascript

Peter Alexander · 技术社区 · 14 年前

我正在使用一些代码使用jquery构建表,但是在mac osx上的firefox 3.5.3中,表单元格都单独出现在单独的行上,而不是各自的行中。OSX上的Chrome5.0.342.7beta和Safari4.0.5都能正确生成表。

下面是一个最小的复制案例:

<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>

在chrome和safari中,我得到了正确的输出:

x x x
x x x
x x x

但是Firefox产生了:

x
x
x
x
x
x
x
x
x

请注意,如果我不使用javascript(即直接进入html)手动创建确切的表,那么该表将正确显示在firefox中。另外,如果我把js改成 append 然后在一个调用中完成整个表,然后它也可以工作——唯一不工作的时候是,如果你像我以前那样一部分一部分地追加它。

我的问题是:这是意料之中的,还是我应该将其作为一个bug报告给firefox?我很确定这是一个firefox的bug,但我对js和web开发还是个新手,所以也许我遗漏了什么?

很明显,有很多简单的方法可以解决这个问题——这不是我关心的。见上文。

2 回复 | 直到 7 年前

PetersenDidIt 14 年前

您正在尝试执行jquery将处理的许多操作,因为您正在尝试执行以下操作:

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将为您创建一个dom片段并为您创建元素。

Pointy 14 年前

我认为附加 <tr> 元素到身体 -他们应该是 在桌子里面 . 当您附加 <table> 元素,您将附加一个完成表元素。然后添加随机表行之后这真的毫无意义。

请改为:

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);

这样,就可以将表单元格元素追加到每一行,将每一行追加到表中,最后将表追加到正文中。

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前