这个问题之前已经被问过,请参阅:jQuery select only tr/td in main table, not nested tables. ,但它对我来说并不能作为解决方案。
$("#tablePartners tr:odd").addClass("odd");
$("#tablePartners tr:even").hide();
$("#tablePartners tr:first-child").show();
$("#tablePartners tr.odd").click(function(){
$(this).next("tr").toggle();
$(this).find(".arrow").toggleClass("up");
});
该代码可以很好地切换表格上的行,但是,当我在表格中嵌套表格时,它会中断:
<table id="tablePartners">
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Address</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#">Partner Name</a></td>
<td>Random description</td>
<td>1 Random Street</td>
<td><div class="arrow"></div></td>
</tr>
<tr>
<td colspan="4">
<table>
<tr>
<td><b>Phone</b></td>
<td>0123456789</td>
</tr>
<tr>
<td><b>Contact Name</b></td>
<td>Jamie</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
我尝试这样做以仅将事件应用于父表而不是嵌套表(如其他问题线程中的建议),但它不起作用:
$("#tablePartners>tbody>tr:odd").addClass("odd");
$("#tablePartners>tbody>tr:even").hide();
$("#tablePartners>tbody>tr:first-child").show();
$("#tablePartners>tbody>tr.odd").click(function(){
$(this).next("tr").toggle();
$(this).find(".arrow").toggleClass("up");
});
编辑:通过不起作用,我的意思是:切换事件不起作用并且奇数行没有隐藏。在第一个 JavaScript 中,切换有效,奇数行被隐藏,但嵌套表奇数行也被隐藏,这是我不想要的。
我认为这一定是微不足道的,但我的视野狭隘。
我把它放在jsfiddle上:http://jsfiddle.net/9eJ8y/2/
最佳答案
问题是第一个代码还选择了标题行。使用 tbody
则不会,即您少了一行。您可以切换奇数
和偶数
来创建相同的效果:
$("#tablePartners > tbody > tr:even").addClass("even");
$("#tablePartners > tbody > tr:odd").hide();
$("#tablePartners > tbody > tr:first-child").show();
$("#tablePartners > tbody > tr.even").click(function(){
$(this).next("tr").toggle();
$(this).find(".arrow").toggleClass("up");
});
关于jquery - 仅选择主表中的 tr,而不选择嵌套表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6107874/