【问题标题】：Jquery Show/Hide Multiple Table Rows [closed]Jquery显示/隐藏多个表行[关闭]
【发布时间】：2012-04-28 06:12:42
【问题描述】：

尝试使用 jquery 显示/隐藏表格行。前两行有效。第三行不显示所有数据。

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

表格的 HTML 数据主要的数据

<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>

用于 Jquery 显示/隐藏功能的 JavaScript

$(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");
});
});

【问题讨论】：

第三次主播之后没有.data
从头开始，看起来你刚刚修改了它，它看起来可以工作，有什么问题？
@SpYk3HH 最后一个 a.main 只显示第一个兄弟 tr.data，我认为他想要 tr.main 条目之间的所有 tr.data 行

标签： jquery html-table hide rows show

【解决方案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>

【讨论】：

fiddle
@DefyGravity 伟人