Question

标题几乎说明了一切给出像

这样的表格

<table>
  <tr>
    <th>Header 1</td>
    <th>Header 2</td>
  </tr>
  <tr>
    <td>Datum 1</td>
    <td> Datum 2</td>
  </tr>
  <tr>
    <td>Datum 1</td>
    <td> Datum 2</td>
  </tr>
</table>

如何选择包含th标题而不包含其他标题的行？

Answer 1

表达式：

$(function() {
  $("tr:has(th):not(:has(td))").hide();
});

甚至只是：

$(function() {
  $("tr:not(:has(td))").hide();
});

完整示例：

<html>
<head>
  <title>Layout</title>
</head>
<body>
<table>
  <tr>
    <th>Header 1</td>
    <th>Header 2</td>
  </tr>
  <tr>
    <td>Datum 1</td>
    <td> Datum 2</td>
  </tr>
  <tr>
    <td>Datum 1</td>
    <td> Datum 2</td>
  </tr>
  <tr>
    <th>Header 3</th>
    <th>Datum 2</td>
  </tr>
</table>
<script src="http://www.google.com/jsapi"></script>
<script>
  google.load("jquery", "1.3.1");
  google.setOnLoadCallback(function() {
    $(function() {
      $("tr:has(th):not(:has(td))").hide();
    });
  });
</script>
</body>
</html>

Answer 2

如果可能，最好将表格标题括在＆lt; thead＆gt;内。元件

<table>
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
</table>

这样，选择表头就像下面这样简单：

$('thead');

或仅选择＆lt; tr＆gt;

$('thead tr');

您的标记将更具可读性，并且您的表格样式变得更容易，因为您可以更轻松地定位表格标题或正文中的元素。

Answer 3

jQuery("tr:has(th)")

将选择包含至少一个 tr

的每个th

kthxbye：）

Answer 4

使用:has选择器：

$('tr:has(th)').addClass('sample')

如果您的桌子中包含混合th和td的孩子，可能无效。

Answer 5

Dunno，如果它像Dojo CSS3查询，但你可以使用第一个子伪类，如果jQuery支持它：

tr th：first-child

或

tr th：nth-child（1）

请参阅：http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/

jQuery - 如何选择包含th的tr？

5 个答案: