Question

我试图通过点击td来切换表格行，没有发生请帮助。

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

Answer 1

您在点击的next()上调用td（无论如何，在第一个单元格上）。 next()的作用是找到与选择器匹配的问题元素的最近的兄弟。没有tr是被点击的td的兄弟。您需要确保在next()上呼叫tr，以便找到 next tr：

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

此外，您在该jsfiddle中的标记有点棘手（例如，您的行中的列数不一致，我认为这可能是某些拼写错误的结果。）

Answer 2

在第一行中，您有班级名称＆＃34; show-details＆＃34;在＆＃34; td＆＃34;。在后续行中，类名称位于＆＃34; tr＆＃34;元素。因为你正在使用＆＃34; .next（）＆＃34;找到一个＆＃34; tr＆＃34;，这个班级应该在＆＃34; tr＆＃34;如第二排，第三排和第四排。

Answer 3

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

接下来，这应该有效：

$(document).ready(function()
         {
             $(".rowToClick").click(function() { $(this).nextUntil(".rowToClick").toggle(); });
         });

通过单击td来切换表行

3 个答案: