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

时间：2016-05-12 12:47:34

标签： jquery html html-table expand

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

任何人都可以帮我找到简约的解决方案吗？

对于Live-Demo，您可以使用：use for live demo（通过复制以下代码）

感谢。

更新 我只需要扩展和折叠（隐藏和显示）所有＆＃34; SIGNALS＆＃34;。 ＆＃34; FRAMES＆＃34;必须一直显示。 用于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>

3 个答案:

答案 0 :(得分：0)

尝试这个

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

答案 1 :(得分：0)

像这样的东西。 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>

答案 2 :(得分：0)

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">
...
...
...
相关问题
最新问题