Jquery显示/隐藏多个表行 [英] Jquery Show/Hide Multiple Table Rows

问题描述

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

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


主要
数据

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>

用于Jquery show / hide的JavaScript函数

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

推荐答案

css

tr.data {display：none;}

css

tr.data {display:none;}

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

html

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>

这篇关于Jquery显示/隐藏多个表行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！