javascript - 使用 jquery 在表中选择 TR。

Question

我在表格场景中有表格。当我尝试使用 $("#table tr");then 选择 trs 时，它也会从内部表中选择所有 tr。

如何仅从外部表中选择 tr。

Answer 1

改用这个：

$('#table > tr'); // choose direct child tr nodes from table with id 'table'

或者

$('#table > tbody > tr');

如果你有tbody元素。

这是 jQuery 文档的链接：http: //api.jquery.com/child-selector/

Answer 2

直觉上好像

$('table.top > tr');

就足够了。但是，您不能保证一定会。一些浏览器隐式插入一个tbody元素作为所有trs 的父元素。这在技术上是某些版本的 HTML 标准所要求的。然而，并非所有浏览器都这样做。为了安全起见，您可能应该这样做：

$('table.top > tr, table.top > thead > tr, table.top > tbody > tr');

有点冗长，但更有可能在更多情况下工作。

Answer 3

如果您在一个页面中有多个表格，请为它们提供类，这样您就不必每隔一段时间都经历一次......

例如

$('.mytable > tr')

html

<table class="mytable">
  <tr>
    <td>...</td>
  </tr>
</table>

Answer 4

是的：

$('#table > tr');

但是，如果您要进行样式更改，请确保首先为所有表格行设置基本样式（或专门针对内部表格）。

例如，如果你执行$("#table > tr").css("background-color", "orange");，内部表格也会变成橙色，因为通过 CSS 属性它们继承了它们的父样式。

首先为所有表格行设置基色：

tr {
background-color: white;
}

Answer 5

使用 jQuery 在表体中选择直接子级有两种选择：

var rows = $('#table > tbody > tr');

或者

var rows = $('#table').children('tbody').children('tr');

该tbody元素是在 DOM 中自动创建的（也在过时的 IE5.5 中），即使它不是用 HTML 编写的。
使用 jQuery 的子选择器比.children() 方法更具可读性和速度。