Jquery Show/Hide Multiple Table Rows [closed]

问题

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.

Closed 7 years ago.

Trying to show/hide table rows using jquery. First two rows work. The third row doesn't display all data.

Jfiddle: http://jsfiddle.net/vcolmenar/wG8qf/1/

HTML Data for the Table Main Data

<tr class="main">
    <td>
    <a href="#" class="main">12345</a>
    </td>
</tr>

<tr class = "data">
    <td>
    </td>
    <td>
        11111
    </td>
</tr>

<tr class="main">
    <td>
        <a href="#" class="main">12345</a>
    </td>
</tr>

<tr class = "data">
    <td>
    </td>
    <td>
        11111
    </td>
</tr>

<tr class="main">   
    <td>
        <a href="#" class="main">12345</a>
    </td>  
</tr>

<tr class = "data">
    <td>
    </td>
    <td>
        11111
    </td>
</tr>

<tr class = "data">
    <td>
    </td>
    <td>
        22222
    </td>
</tr>
<tr class = "data">
    <td>
    </td>
    <td>
        33333
    </td>
</tr>
<tr class = "data">
    <td>
    </td>
    <td>
        44444
    </td>
</tr>

JavaScript for Jquery show/hide function

$(document).ready(function() {
//Hide table rows with class 'min', but appear when clicked.
$(".data").hide();
$(".main").click(function() {
    $(this).parent().parent().next(".data").toggle("fast");
});
});

回答1:

css

tr.data {display:none;}

javascript

$(function(){
  $("#main-data-table","body").on({'click':function(event){
    event.preventDefault();
    $(this).closest("tr.main").nextUntil("tr.main").toggle("fast");
   }},
   "a.main",null);
});

html

<table id="main-data-table">
<thead><tr>
    <th>Main</th>
    <th>Data</th>
</tr></thead>
<tfoot></tfoot>
<tbody>
<tr class="main">
        <td>
        <a href="#" class="main">12345</a>
        </td>
    </tr>

    <tr class = "data">
        <td>
        </td>
        <td>
            11111
        </td>
    </tr>

    <tr class="main">
        <td>
            <a href="#" class="main">12345</a>
        </td>
    </tr>

    <tr class = "data">
        <td>
        </td>
        <td>
            11111
        </td>
    </tr>

    <tr class="main">   
        <td>
            <a href="#" class="main">12345</a>
        </td>  
    </tr>

    <tr class = "data">
        <td>
        </td>
        <td>
            11111
        </td>
    </tr>

    <tr class = "data">
        <td>
        </td>
        <td>
            22222
        </td>
    </tr>
    <tr class = "data">
        <td>
        </td>
        <td>
            33333
        </td>
    </tr>
    <tr class = "data">
        <td>
        </td>
        <td>
            44444
        </td>
    </tr>
</tbody>
</table>

来源：https://stackoverflow.com/questions/10182187/jquery-show-hide-multiple-table-rows