通过单击td切换表格行

Question

Please check the fiddle link http://jsfiddle.net/mv7Y5/89/

am trying to achieve to toggle the table row by clicking the td, which is not happening please help needed.

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

Answer 1

You are calling next() on the td that gets clicked (on the first cell, anyway). What next() does is it finds the nearest sibling of the element in question that matches the selector. There is no tr that is a sibling of the td that gets clicked. You need to make sure that you're calling next() on the tr , so it can find the next tr :

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

Additionally, your markup in that jsfiddle is a little screwy (you've got an inconsistent number of columns in your rows, for example, which I believe may be the result of some typos.)

Answer 2

In your first row, you have the class name "show-details" on the "td". On the subsequent rows, the class name is on the "tr" elements. Since you are using ".next()" to find a "tr", the class should be on the "tr" as in the second, third and forth rows.

Answer 3

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

Next, this should work:

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