使用jquery在表中选择TR。

Question

我在表格场景中有表格。当我尝试使用时选择trs $("#table tr");然后它也从内部表中选择所有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元素作为所有tr的父元素。某些版本的HTML标准在技术上需要这样做。但是，并非所有浏览器都这样做。为了安全起见，你应该做这样的事情：

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

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

Answer 3

如果您在一个页面中有多个表，请为它们提供类，这样您就不必每隔一段时间都这样做了。

e.g。

$('.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在表体中有selecting direct children的两种选择：

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

或

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

tbody元素在DOM中也是created automatically（也在过时的IE5.5中），即使它不是用HTML编写的。
使用jQuery的child selector比a bit faster更具可读性和.children() method。