2016-05-12 16 views
0

テーブルの行を折りたたむソリューションが見つかりました。しかし、私は1回のクリックで、同時にすべてを拡大縮小するボタンを作ることはできません。ボタンでテーブルのすべての行を展開/折りたたむ

私は最小限の解決策を見つけるのに手助けができますか? use for live demo(以下のコードをコピーして)

ありがとう:あなたが使用できるライブ・デモの

更新: すべての「信号」を展開して折りたたんで(非表示にする)必要があります。 「フレーム」は常に表示する必要があります。 expand_allのボタンとcollaps_allのボタンも問題ありません。

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

答えて

0

このように、この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(); 
    }); 
    }); 
    }); 
+0

私はこの例を試してみました....しかし、それは私のために動作しません。そして、結果は丁度紛らわしいことでした。 –

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>

+0

ああ....いいですね。しかし、STRONGのアイテムはいつもそこにいる必要があります。 「フレーム」(太字/強)の下にあるすべての行を同時に折りたたむことは可能ですか? –

+0

@HansMaulwurf:更新された答えを確認してください! – Pugazh

+0

ありがとう....しかし、それはテーブルをクリックして拡大して折り畳むための他の2つの関数では機能しません。 (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"> 
... 
... 
... 
関連する問題