Question

我知道如果有足够的时间我会想到这一点，但如果某种善良的灵魂可以指向正确的方向，那肯定会很好。我对jQuery相对缺乏经验，但我有一些中级的javascript知识。

给定表单中的对象数组：

[
   {"value1":"10/14/2010", "value2":"1", "value3":"1178.94"},
   {"value1":"10/12/2010", "value2":"1", "value3":"1341.49"}
]

如何为每个数组元素添加一个tr，其中value1，value2和value3作为每个子td元素的内容？

阻止我的是：

var b = $('#table tbody');
tr = b.append($("<tr></tr>"));
tr.append($("<td>blah</td><td>blah</td><td>blah</td>"));

它附加了tr元素，我通过常规DOM方法证明了这一点。但它不会附加td元素。它的作用就像b.append（）的结果不是附加的tr元素？我想这可能是对的，我需要这样做：

tr = $("<tr></tr>");
b.append(tr);
tr.append(...);

无论如何，你的帮助让我走上正轨非常感激。

别介意红利问题，但这里仅供参考，因为我最初发布了它。

前两个值实际上是第三个值的x和y坐标。因此，最左边的列显示日期，顶行显示数字1或2，小数值应该在相应的单元格中。任何关于最佳方法的想法也将受到赞赏。但是这个问题主要是为什么我的jQuery东西不起作用。

也就是说，表格需要如下所示：

              1       2
10/17/2010  2345.6  1543.2
10/16/2010          1234.5
10/15/2010  2222.2

但我试图看看我的整个ajax / JSON往返是否先行，甚至无法那 !!我会做一种“合并连接”，逐步完成日期/列的列表，填写存在的值，并为缺失值做其他事情。

Answer 1

当你这样做时：

b.append($("<tr></tr>"));

它正在返回b，因此tr变量实际上是在引用tbody。

试试这个：

var b = $('#table tbody');
tr = $("<tr></tr>").appendTo(b);
tr.append( "<td>blah</td><td>blah</td><td>blah</td>" );

这会改为使用jQuery's .appendTo() method来反转位置，以便返回新的<tr>。

或者你可以像这样完全避免变量：

$("<tr></tr>").appendTo( '#table tbody' )
              .append("<td>blah</td><td>blah</td><td>blah</td>");

或

$("<tr></tr>").append("<td>blah</td><td>blah</td><td>blah</td>")
              .appendTo( '#table tbody' );

Answer 2

试试这个：

//change arrayList to your array variable
var t = "";
$.each(arrayList, function(i, v) {
   t += '<tr><td>'+v.value1+'</td><td>'+v.value2+'</td><td>'+v.value3+'</td></tr>';
});
$('#table tbody').append(t);

应该这样做！

使用jQuery从对象数组中添加表元素

2 个答案: