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

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

它 append 了 tr 元素，我已经通过常规 DOM 方法证明了这一点。但它不会 append td 元素。它的行为就像 b.append() 的结果不是 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' );