通过单击按钮处理折叠html表，而不是单击行

时间：2016-07-11 11:32:08

标签： javascript jquery html

我是Javascript的新手，已经使用jquery设置了下面的折叠表。这已经有效了。我可以通过单击行来展开或折叠整个表格或展开和折叠列。

但这也会通过设置BRS或set等选项来更改视图（请参阅HTML）。

我想要的是通过第一列中的按钮“+”来控制所有这些（参见HTML）。

也许这很简单也许不是。有人能帮助我吗？

由于

<!DOCTYPE html><html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="/js/jquery.js"></script><script type="text/javascript">
$(document).ready(function() {
        $('.expandable').nextAll('tr').each( function() {	// hide all at start
                if(!($(this).is('.expandable')))
                $(this).hide();
        });
        $('.expandable').click(function () {			// toggle single by click
                $(this).nextAll('tr').each( function() {
                        if($(this).is('.expandable')) {
                                return false; }
                        $(this).toggle();
                });
        });
	$('#expand_all').click(function() {			// show all
		$('.expandable').nextAll('tr').each( function() {
			if(!($(this).is('.expandable')))
		$(this).show();
		});
	});
	$('#collaps_all').click(function() {			// hide all
		$('.expandable').nextAll('tr').each( function() {
			if(!($(this).is('.expandable')))
		$(this).hide();
		});
	})
});
</script><title>ConfigPage for CAN on RestbusSimulationStation</title>
<body>
<h2>RSS</h2>
<button style="font-size:20px" id="expand_all">expand all</button><button style="font-size:20px" id="collaps_all">collaps all</button>
<table border="1">
<tr bgcolor="#fb9d00">
<th></th>
<th>FRAMES</th>
<th>ID</th>
<th>DLC</th>
<th>BRS</th>
<th>CYCLE/s</th>
<th>SET</th>
<th>SIGNALS</th>
<th>POS</th>
<th>Bits</th>
<th>select:</th>
<th>comput method</th>
<th>enum</th>
</tr>

<tr class="expandable">
<td><input type="button" value="+"></td>
<td><strong>EOCM_CAN8_MSG01</strong></td>
<td>37</td>
<td>16</td>
<td>
<input type="checkbox" name="brs">
</td>
<td>0.01</td>
<td>
<input type="checkbox" name="frame" checked>
</td>
<tr><td><td><td><td><td><td>
<td><span title="Host Vehicle Path Curvature
">IHstVhPthCrvt</span></td>
<td>2</td>
<td>15</td>
<td>
<input type="number" name="value" required="required" value="0" min="0" max="32767"><td></td>
<td><input type="number" name="enum" min="0" style="width: 3em;"></td>
</td>
</td></td></td></td></td></td></tr>

<tr class="expandable">
<td><input type="button" value="+"></td>
<td><strong>EOCM_CAN8_MSG01</strong></td>
<td>37</td>
<td>16</td>
<td>
<input type="checkbox" name="brs">
</td>
<td>0.01</td>
<td>
<input type="checkbox" name="frame" checked>
</td>
<tr><td><td><td><td><td><td>
<td><span title="Host Vehicle Path Curvature
">IHstVhPthCrvt</span></td>
<td>2</td>
<td>15</td>
<td>
<input type="number" name="value" required="required" value="0" min="0" max="32767"><td></td>
<td><input type="number" name="enum" min="0" style="width: 3em;"></td>
</td>
</td></td></td></td></td></td></tr>
</table>
</body>
</html>

1 个答案:

答案 0 :(得分：0)

请看一下这种方法。 而不是将click处理程序附加到<tr>;我们将其附加到button $('.expandable input[type=button]').click。除了代码的其余部分几乎就是这样。

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="/js/jquery.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $('.expandable').nextAll('tr').each(function() { // hide all at start
      if (!($(this).is('.expandable')))
        $(this).hide();
    });
    $('.expandable input[type=button]').click(function() { // toggle single by click
      var trElem = $(this).closest("tr");
      trElem.nextAll('tr').each(function() {
        if ($(this).is('.expandable')) {
          return false;
        }
        $(this).toggle();
      });
    });
    $('#expand_all').click(function() { // show all
      $('.expandable').nextAll('tr').each(function() {
        if (!($(this).is('.expandable')))
          $(this).show();
      });
    });
    $('#collaps_all').click(function() { // hide all
      $('.expandable').nextAll('tr').each(function() {
        if (!($(this).is('.expandable')))
          $(this).hide();
      });
    })
  });
</script>
<title>ConfigPage for CAN on RestbusSimulationStation</title>

<body>
  <h2>RSS</h2>
  <button style="font-size:20px" id="expand_all">expand all</button>
  <button style="font-size:20px" id="collaps_all">collaps all</button>
  <table border="1">
    <tr bgcolor="#fb9d00">
      <th></th>
      <th>FRAMES</th>
      <th>ID</th>
      <th>DLC</th>
      <th>BRS</th>
      <th>CYCLE/s</th>
      <th>SET</th>
      <th>SIGNALS</th>
      <th>POS</th>
      <th>Bits</th>
      <th>select:</th>
      <th>comput method</th>
      <th>enum</th>
    </tr>

    <tr class="expandable">
      <td>
        <input type="button" value="+">
      </td>
      <td><strong>EOCM_CAN8_MSG01</strong>
      </td>
      <td>37</td>
      <td>16</td>
      <td>
        <input type="checkbox" name="brs">
      </td>
      <td>0.01</td>
      <td>
        <input type="checkbox" name="frame" checked>
      </td>
      <tr>
        <td>
          <td>
            <td>
              <td>
                <td>
                  <td>
                    <td><span title="Host Vehicle Path Curvature
">IHstVhPthCrvt</span>
                    </td>
                    <td>2</td>
                    <td>15</td>
                    <td>
                      <input type="number" name="value" required="required" value="0" min="0" max="32767">
                      <td></td>
                      <td>
                        <input type="number" name="enum" min="0" style="width: 3em;">
                      </td>
                    </td>
                  </td>
                </td>
              </td>
            </td>
          </td>
        </td>
      </tr>

      <tr class="expandable">
        <td>
          <input type="button" value="+">
        </td>
        <td><strong>EOCM_CAN8_MSG01</strong>
        </td>
        <td>37</td>
        <td>16</td>
        <td>
          <input type="checkbox" name="brs">
        </td>
        <td>0.01</td>
        <td>
          <input type="checkbox" name="frame" checked>
        </td>
        <tr>
          <td>
            <td>
              <td>
                <td>
                  <td>
                    <td>
                      <td><span title="Host Vehicle Path Curvature
">IHstVhPthCrvt</span>
                      </td>
                      <td>2</td>
                      <td>15</td>
                      <td>
                        <input type="number" name="value" required="required" value="0" min="0" max="32767">
                        <td></td>
                        <td>
                          <input type="number" name="enum" min="0" style="width: 3em;">
                        </td>
                      </td>
                    </td>
                  </td>
                </td>
              </td>
            </td>
          </td>
        </tr>
  </table>
</body>

</html>

相关问题
最新问题