通过单击td切换表行

table row toggle by clicking td

本文关键字：td 单击      更新时间：2023-09-26

请查看提琴链接http://jsfiddle.net/mv7Y5/89/

我试图通过单击td来切换表行，这是不发生的，请帮助需要。

    $(function() {
    $(".details").hide();
    $('.show-details').click(function(e) {
        $(this).next("tr").slideToggle(500);
    });
});

在点击的td上调用next()(无论如何，在第一个单元格上)。next()所做的是找到与选择器匹配的元素的最近的兄弟。没有被单击的td的兄弟tr。你需要确保你在tr上调用next()，所以它可以找到下一个 tr:

$(function() {
    $(".details").hide();
    $('td.show-details').click(function(e) {
        $(this).parent().next("tr").slideToggle(500);
    });
});

此外，您在jsfiddle中的标记有点乱(例如，您的行中有不一致的列数，我认为这可能是一些拼写错误的结果)

在第一行中，在"td"上有类名"show-details"。在随后的行中，类名位于"tr"元素上。由于您正在使用"。next()"来查找"tr"，因此该类应该位于"tr"上，就像在第二，第三和第四行中一样。

<tr class='rowToClick'><td>click me</td></tr>

接下来，这应该可以工作了:

$(document).ready(function()
         {
             $(".rowToClick").click(function() { $(this).nextUntil(".rowToClick").toggle(); });
         });
相关文章：