仅选择主表中的 tr,而不选择嵌套表
这个问题之前已经被问过,请参阅: jQuery 仅选择tr/td 在主表中,而不是嵌套表中。 但是它对我来说并不是一个解决方案。
$("#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/
This question has been asked before, see: jQuery select only tr/td in main table, not nested tables. however it didn't work as a solution for me.
$("#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");
});
That code works fine for toggling a row on a table, however, it breaks when I have nested tables in the table:
<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>
I've tried doing this to apply the events only to the parent and not nested tables (as suggested in the other question thread), but it didn't work:
$("#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");
});
EDIT: By not working, what I mean is: the toggle event does not work and the odd rows are not hidden. In the first javascript, the toggle worked and the odd rows were hidden but the nest table odd rows were hidden too which I what I don't want.
I think this must be trivial but I've got tunnel vision.
I've put it on jsfiddle: http://jsfiddle.net/9eJ8y/2/
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
问题是第一个代码还选择了标题行。使用
tbody
则不会,即您少了一行。您可以切换奇数和偶数来创建相同的效果:演示
The problem is that the first code also selects the header row. Using
tbody
does not, i.e. you have one row less. You could switchodd
andeven
to create the same effect:DEMO