通过按钮展开/折叠表格上的所有行答案

【问题标题】：Expand/collapse all rows on a table by a button通过按钮展开/折叠表格上的所有行
【发布时间】：2016-09-08 07:32:44
【问题描述】：

我找到了折叠表格中的行的解决方案。但是我不能通过单击制作一个同时展开和折叠的按钮。

谁能帮我找到一个简约的解决方案？

对于现场演示，您可以使用：use for live demo（通过复制下面的代码）

谢谢。

更新： 我只需要展开和折叠（隐藏和显示）所有“信号”。 “框架”必须一直显示。一个 expand_all 按钮和一个 collaps_all 按钮也可以。

更新 2： 它必须是这样的：expand/collaps all，但仅适用于表格。

我的代码：

<!DOCTYPE html><html>
<script src="http://code.jquery.com/jquery-2.2.2.min.js"></script>
</script><script type="text/javascript">
$(document).ready(function() {
        $('.expandable').click(function () {
                $(this).nextAll('tr').each( function() {
                        if($(this).is('.expandable')) {
                                return false; }
                        $(this).toggle();
                });
        });

        $('.expandable').nextAll('tr').each( function() {
                if(!($(this).is('.expandable')))
                $(this).hide();
        });
});
</script><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Restbus for CAN based on AUTOSARr4.1</title>
</head>
<body>
<h2>RSS</h2>
<button id="click_for_show_all">Show/Hide all</button>
<form action="/cgi-bin/check.cgi">
<table border="1">
<tr bgcolor="#fb9d00">
<th>FRAMES</th>
<th>ID</th>
<th>LENGHT/B</th>
<th>CAN-FD?</th>
<th>SET</th>
<th>SIGNALS</th>
<th>POS</th>
<th>LENGTH/b</th>
<th>select:</th>
</tr>
<tr class="expandable">
<td><strong>BkUpSysPwrMdGrp_MSG</strong></td>
<td>837</td>
<td>1</td>
<td>true</td>
<td><input type="checkbox" name="837" value="0.25" checked></td>
<tr><td><td><td><td><td>
<td><span title="Backup System Power Mode Group : Backup Power Mode Invalid
">IBkupPwrMdMstr_Inv</span></td>
<td>3</td>
<td>1</td>
<td><select name="value"><option value="0">FALSE</option>
<option value="1">TRUE</option></select></td>
</td></td></td></td></td></tr>
<tr><td><td><td><td><td>
<td><span title="Backup System Power Mode Group : Backup Power Mode Master Enabled
">IBkupPwrMdMstrEn</span></td>
<td>4</td>
<td>1</td>
<td><select name="value"><option value="0">FALSE</option>
<option value="1">TRUE</option></select></td>
</td></td></td></td></td></tr>
<tr><td><td><td><td><td>
<td><span title="Backup System Power Mode Group : System Backup Power Mode
">IBkUpSysPwrMd</span></td>
<td>7</td>
<td>3</td>
<td><select name="value"><option value="0">OFF</option>
<option value="1">ACC</option>
<option value="2">RUN</option>
<option value="3">PROPULSION</option>
<option value="4">START</option></select></td>
</td></td></td></td></td></tr>
</tr>
<tr class="expandable">
<td><strong>C8_LRRODP_Brst1_PCSM_MSG</strong></td>
<td>1896</td>
<td>8</td>
<td>true</td>
<td><input type="checkbox" name="1896" value="16.08" checked></td>
<tr><td><td><td><td><td>
<td><span title="Long Range Radar Object Detection and Processing Burst 1 Protected Counter Sync Message
">ILRRODP_Brst1_PCSM</span></td>
<td>0</td>
<td>64</td>
<td><input type="number" name="value" value="0" min="0.0" max="1.8446744073709552E19"></td>
</td></td></td></td></td></tr>
</tr>
</table>
<br><input style="font-size:25px" type="submit" value="START">
</form>
<button style="font-size:25px" type="button" onclick="alert('Please simple use the browser inbuilt search funktion. (CTRL+F)!')">SEARCH</button>
</body>
</html>

【问题讨论】：

标签： jquery html html-table expand

【解决方案1】：

试试这个

$(document).ready(function() {
    $('.expandable').click(function () {
            $(this).nextAll('tr').each( function() {
                    if($(this).is('.expandable')) {
                            return false; }
                    $(this).toggle();
            });
    });

    $('.expandable').nextAll('tr').each( function() {
            if(!($(this).is('.expandable')))
            $(this).hide();
    });
    $("#click_for_show_all").click(function(){
    $('.expandable').each( function(){
    $(this).nextAll('tr').toggle();
    });
    });
    });

【讨论】：

我试过这个例子......但它对我不起作用。结果简直难以描述。

【解决方案2】：

类似的东西。 jQuery .toggle() 可以做到这一点

<!DOCTYPE html>
<html>
<script src="http://code.jquery.com/jquery-2.2.2.min.js"></script>

<script type="text/javascript">
  $(document).ready(function() {
    var show = true;
    $('#click_for_show_all').click(function() {
      if (show) {
        $('td').hide();
        $('td strong').parents('tr').find('*').show();
      } else {
        $('td').show();
      }
      show = !show;
    });
  });
</script>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Restbus for CAN based on AUTOSARr4.1</title>
</head>

<body>
  <h2>RSS</h2>
  <button id="click_for_show_all">Show/Hide all</button>
  <form action="/cgi-bin/check.cgi">
    <table border="1">
      <tr bgcolor="#fb9d00">
        <th>FRAMES</th>
        <th>ID</th>
        <th>LENGHT/B</th>
        <th>CAN-FD?</th>
        <th>SET</th>
        <th>SIGNALS</th>
        <th>POS</th>
        <th>LENGTH/b</th>
        <th>select:</th>
      </tr>
      <tr class="expandable">
        <td><strong>BkUpSysPwrMdGrp_MSG</strong>
        </td>
        <td>837</td>
        <td>1</td>
        <td>true</td>
        <td>
          <input type="checkbox" name="837" value="0.25" checked>
        </td>
        <tr>
          <td>
            <td>
              <td>
                <td>
                  <td>
                    <td><span title="Backup System Power Mode Group : Backup Power Mode Invalid
">IBkupPwrMdMstr_Inv</span>
                    </td>
                    <td>3</td>
                    <td>1</td>
                    <td>
                      <select name="value">
                        <option value="0">FALSE</option>
                        <option value="1">TRUE</option>
                      </select>
                    </td>
                  </td>
                </td>
              </td>
            </td>
          </td>
        </tr>
        <tr>
          <td>
            <td>
              <td>
                <td>
                  <td>
                    <td><span title="Backup System Power Mode Group : Backup Power Mode Master Enabled
">IBkupPwrMdMstrEn</span>
                    </td>
                    <td>4</td>
                    <td>1</td>
                    <td>
                      <select name="value">
                        <option value="0">FALSE</option>
                        <option value="1">TRUE</option>
                      </select>
                    </td>
                  </td>
                </td>
              </td>
            </td>
          </td>
        </tr>
        <tr>
          <td>
            <td>
              <td>
                <td>
                  <td>
                    <td><span title="Backup System Power Mode Group : System Backup Power Mode
">IBkUpSysPwrMd</span>
                    </td>
                    <td>7</td>
                    <td>3</td>
                    <td>
                      <select name="value">
                        <option value="0">OFF</option>
                        <option value="1">ACC</option>
                        <option value="2">RUN</option>
                        <option value="3">PROPULSION</option>
                        <option value="4">START</option>
                      </select>
                    </td>
                  </td>
                </td>
              </td>
            </td>
          </td>
        </tr>
      </tr>
      <tr class="expandable">
        <td><strong>C8_LRRODP_Brst1_PCSM_MSG</strong>
        </td>
        <td>1896</td>
        <td>8</td>
        <td>true</td>
        <td>
          <input type="checkbox" name="1896" value="16.08" checked>
        </td>
        <tr>
          <td>
            <td>
              <td>
                <td>
                  <td>
                    <td><span title="Long Range Radar Object Detection and Processing Burst 1 Protected Counter Sync Message
">ILRRODP_Brst1_PCSM</span>
                    </td>
                    <td>0</td>
                    <td>64</td>
                    <td>
                      <input type="number" name="value" value="0" min="0.0" max="1.8446744073709552E19">
                    </td>
                  </td>
                </td>
              </td>
            </td>
          </td>
        </tr>
      </tr>
    </table>
    <br>
    <input style="font-size:25px" type="submit" value="START">
  </form>
  <button style="font-size:25px" type="button" onclick="alert('Please simple use the browser inbuilt search funktion. (CTRL+F)!')">SEARCH</button>
</body>

</html>

【讨论】：

哦....看起来不错。但是 STRONG 项目需要一直存在。是否可以同时折叠“框架”（粗体/强）下的所有行？
谢谢....但这不适用于通过单击表格来展开和折叠的其他 2 个功能。（见 2. 更新）

【解决方案3】：

Yippi ......它的工作原理。伟大的！谢谢大家。

解决办法在这里：

<!DOCTYPE html>
<html>
<script src="http://code.jquery.com/jquery-2.2.2.min.js"></script>

<script type="text/javascript">
  $(document).ready(function() {
    var show = true;
    $('.expandable').click(function () {
            $(this).nextAll('tr').each( function() {
                    if($(this).is('.expandable')) {
                            return false; }
                    $(this).toggle();
            });
    });

    $('.expandable').nextAll('tr').each( function() {
            if(!($(this).is('.expandable')))
            $(this).hide();

    });

    $('#click_for_show_all').click(function() {
      $('.expandable').nextAll('tr').each( function() {
            if(!($(this).is('.expandable')))
            $(this).show();
      });
    });

    $('#click_for_hide_all').click(function() {
      $('.expandable').nextAll('tr').each( function() {
            if(!($(this).is('.expandable')))
            $(this).hide();
      });
    });
});
</script>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Restbus for CAN based on AUTOSARr4.1</title>
</head>

<body>
  <h2>RSS</h2>
  <button id="click_for_show_all">expand all</button>
  <button id="click_for_hide_all">collaps all</button>
  <form action="/cgi-bin/check.cgi">
    <table border="1">
...
...
...

【讨论】：