通過單擊td切換表格行

Question

請檢查小提琴鏈接http://jsfiddle.net/mv7Y5/89/

我正試圖通過單擊td來切換表格行，但這種情況並未發生，請提供幫助。

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

Answer 1

您正在被單擊的td上調用next() （無論如何在第一個單元格上）。 next()作用是找到與選擇器匹配的所討論元素的最接近的同級元素。 沒有tr是單擊的td的同級。 您需要確保在tr上調用next() ，以便它可以找到下一個 tr ：

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

此外，您在jsfiddle中的標記有些螺絲釘（例如，您的行中的列數不一致，例如，我認為這可能是某些拼寫錯誤的結果。）

Answer 2

在第一行中，“ td”上具有類名稱“ show-details”。 在隨后的行中，類名稱在“ tr”元素上。 由於您使用的是“ .next（）”來查找“ tr”，因此該類應位於“ tr”上，就像第二，第三和第四行一樣。

Answer 3

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

接下來，這應該工作：

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