Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/72.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/visual-studio-2008/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Jquery显示/隐藏多个表行_Jquery_Html Table_Hide_Rows_Show - Fatal编程技术网

Jquery显示/隐藏多个表行

Jquery显示/隐藏多个表行,jquery,html-table,hide,rows,show,Jquery,Html Table,Hide,Rows,Show,正在尝试使用jquery显示/隐藏表行。前两排工作。第三行不显示所有数据 Jfiddle: 表的HTML数据 主要 资料 css tr.data{display:none;} javascript html 主要 资料 11111 11111 11111 22222 33333 44444 在你的第三个main之后没有.data了,看起来你刚刚修改了它,看起来它正常工作了,有什么问题吗?@SpYk3HH最后一个a.main只显示第一个兄弟tr.data,我想他想要tr.main之间的所有tr

正在尝试使用jquery显示/隐藏表行。前两排工作。第三行不显示所有数据

Jfiddle:

表的HTML数据 主要 资料

css tr.data{display:none;}

javascript html

主要
资料
11111
11111
11111
22222
33333
44444

在你的第三个main之后没有
.data
了,看起来你刚刚修改了它,看起来它正常工作了,有什么问题吗?@SpYk3HH最后一个a.main只显示第一个兄弟tr.data,我想他想要tr.main之间的所有tr.data行entries@DefyGravity伟人
<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>
$(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");
});
});
$(function(){
  $("#main-data-table","body").on({'click':function(event){
    event.preventDefault();
    $(this).closest("tr.main").nextUntil("tr.main").toggle("fast");
   }},
   "a.main",null);
});
<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>