jQuery - 如何选择包含 th 的 tr？
Posted
技术标签:
【中文标题】jQuery - 如何选择包含 th 的 tr？【英文标题】：jQuery - how to select a tr that contains th's? 【发布时间】：2010-10-06 13:00:24 【问题描述】：标题几乎说明了一切。 给定一个像
这样的表<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 个标题而没有其他标题的行？
【问题讨论】：
【参考方案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>
【讨论】：
jQuery 真是太棒了。就是这样。【参考方案2】：如果可能，最好将表头包含在 元素中
这样，选择表格标题就很简单了： 或者只选择 您的标记将更具可读性，并且您的表格样式变得更加容易，因为您可以更轻松地定位表格标题或正文中的元素。 【讨论】：<table>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
$('thead');
$('thead tr');
jQuery("tr:has(th)")
将选择包含至少一个th的每个tr
kthxbye :)
【讨论】：
【参考方案4】：不知道它是否像 Dojo CSS3 查询，但如果 jQuery 支持，您可以使用 first-child 伪类：
tr th:first-child
或
tr th:nth-child(1)
见：http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/
【讨论】：
【参考方案5】：使用:has 选择器：
$('tr:has(th)').addClass('sample')
但是，如果您的桌子上有混合的 th 和 td 孩子，则可能无法使用。
【讨论】：
以上是关于jQuery - 如何选择包含 th 的 tr？的主要内容，如果未能解决你的问题，请参考以下文章