Alle Zeilen in einer Tabelle mit einer Schaltfläche erweitern/reduzieren

Ich habe eine Lösung gefunden, um die Zeilen in meiner Tabelle zu reduzieren. Aber ich kann keinen Knopf machen, der gleichzeitig mit einem einzigen Klick expandiert und kollabiert.Alle Zeilen in einer Tabelle mit einer Schaltfläche erweitern/reduzieren

Kann mir jemand helfen, eine minimalistische Lösung zu finden?

For Live-Demo können Sie: use for live demo (durch den Code zu kopieren)

Dank.

UPDATE: Ich muss nur alle "Signale" erweitern und reduzieren (ausblenden und anzeigen). Die "FRAMES" müssen ständig angezeigt werden. Ein Button für expand_all und ein Button für collaps_all wäre auch in Ordnung.

UPDATE 2: Es hat die gleiche so sein: expand/collaps all aber nur für Tabellen.

Mein Code:

<!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>

Quelle

2016-05-12 Hans Maulwurf

versuchen Sie dieses

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

Quelle

2016-05-12 12:58:50 amine

ich dieses Beispiel ausprobiert haben .... aber es für mich nicht funktioniert. Und das Ergebnis war nur verwirrend zu beschreiben. –

Etwas Ähnliches. jQuery .toggle() tun können, um dieses

<!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>

Quelle

2016-05-12 13:03:57 Pugazh

Ohh .... scheint gut zu sein. Aber die STARKEN Sachen müssen immer da sein. Ist es möglich, alle Zeilen unter den "Frames" (fett/stark) gleichzeitig zu reduzieren? –

@HansMaulwurf: Überprüfen Sie die aktualisierte Antwort! – Pugazh

Danke .... aber das funktioniert nicht mit den anderen 2 Funktionen zum Expandieren und Kollabieren durch Klicken in die Tabelle. (siehe 2. Update) –

Yippi ...... es funktioniert. Groß! Danke für alles.

Die Lösung ist hier:

<!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"> 
... 
... 
...

Quelle

2016-05-12 15:37:02

Alle Zeilen in einer Tabelle mit einer Schaltfläche erweitern/reduzieren

Antwort

Verwandte Themen