如何访问 thead 元素的子行？

Question

我是 Javascript 新手，所以我不确定我是否只是没有理解它，或者我是否发现了某个错误......某些东西，尽管我不知道是什么。我有一个脚本正在加载数据库查询的结果，然后创建一个图形（使用 d3库），然后将原始数据吐出到表中。到目前为止，这一切都运行良好。

接下来我想做的是启用图表上各个数据线的切换。我不想进行 Ajax 调用以返回服务器并再次获取和解析数据，而是只想从原始数字表中读回数据，然后重新绘制图表 - 所有客户端。我的问题是尝试从 和 元素获取列名称值。我可以得到这个：

tbody = $("#raw_body");

console.log(tbody);

并在 Firebug 控制台中看到：

[tbody#raw_body]

在控制台中，我可以单击对象并看到 [0] 实例有“子项”等。但是，每次我尝试这样的操作：

console.log(tbody[0].children[0]);

我得到：

undefined

那么，我如何处理表中的行以分配给 Javascript 对象，就像这样？

r = tbody[0].children[0];

Answer 1

$("#raw_body tbody tr") 将为您提供表中 id 为 raw_body 的所有行。

我不确定你的意思：“那么我如何寻址表的行以分配给Javascript对象，就像这样？”

Answer 2

table 对象有一个名为 rows 的属性。您可以使用它来循环遍历行。

http://www.javascriptkit.com/domref/tableproperties.shtml

var tableObj = $("#myTable").get();
for(var i in tableObj.rows) {
    // Do something
    alert( tableObj.rows[i].innerHTML );
}

如果你想使用 jQuery：

var $rows = $("#raw_body tr");
$rows.each(function() {
    // Do something
    alert( $(this).html() );
});

Answer 3

它实际上是.childNodes[0]。 .children() 是一个 jquery 方法，它扫描子节点以查找指定的模式，因此请使用

tbody[0].childNodes[0]

它。

Answer 4

$("#raw_body")[0]

返回底层 DOM 对象，而不是 jQuery 包装器。 DOM 对象没有 children 方法 (*)。如果您想要 jQuery 包装的版本，请使用 eq() 代替：

var first_row= $('#raw_body').eq(0).children().eq(0);

但是您可以省略 $('#raw_body' 上的 .eq(0) ) 因为只有一个元素与 #raw_body 匹配。 jQuery 包装器对元素和元素列表的处理方式相同，因此您无需提取单个元素即可对其调用 children()。

*：尽管它们确实有一个 childNodes 属性。您可能不想使用它，因为这样您就必须担心元素之间的空白的文本节点。但是，表格尤其具有更易于使用的 rows 和 cells 属性，因此您可以使用以下方法来实现：

var first_row= $('#raw_body')[0].rows[0];