javascript - handle collapsing html table by click on button and not by click to row -
i new javascript , set collapsing table below jquery. works. can expand or collapse complete table or expand , collapse columns clicking on row.
but changes view setting options brs or set (see html).
what want control button "+" in first column (see html).
maybe it's simple maybe not. can me?
thanks
<!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 @ start if(!($(this).is('.expandable'))) $(this).hide(); }); $('.expandable').click(function () { // toggle single click $(this).nextall('tr').each( function() { if($(this).is('.expandable')) { return false; } $(this).toggle(); }); }); $('#expand_all').click(function() { // show $('.expandable').nextall('tr').each( function() { if(!($(this).is('.expandable'))) $(this).show(); }); }); $('#collaps_all').click(function() { // hide $('.expandable').nextall('tr').each( function() { if(!($(this).is('.expandable'))) $(this).hide(); }); }) }); </script><title>configpage 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>
please have @ approach. instead of attaching click handler <tr>; attaching button $('.expandable input[type=button]').click. apart rest of code is.
<!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 @ start if (!($(this).is('.expandable'))) $(this).hide(); }); $('.expandable input[type=button]').click(function() { // toggle single click var trelem = $(this).closest("tr"); trelem.nextall('tr').each(function() { if ($(this).is('.expandable')) { return false; } $(this).toggle(); }); }); $('#expand_all').click(function() { // show $('.expandable').nextall('tr').each(function() { if (!($(this).is('.expandable'))) $(this).show(); }); }); $('#collaps_all').click(function() { // hide $('.expandable').nextall('tr').each(function() { if (!($(this).is('.expandable'))) $(this).hide(); }); }) }); </script> <title>configpage 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>
Comments
Post a Comment