用symfony隱藏表格行（0123）

Question

我開始編碼了。我正在使用Symfony 3.3 我想用複選框隱藏（並顯示）表格上的一個或一些特定行。 我嘗試使用JavaScript和jQuery。我希望隱藏的行保持隱藏狀態。 我不知道該怎麼做。這裏是我的樹枝

{% block body %} 

    <div class="container"> 
     <h3>List of products</h3> 

     <table class="table table-striped"> 
    <thead> 
    <tr> 
     <th>Product</th> 
     <th>Description</th> 
     <th>Size</th> 
     <th>Charges</th> 
     <th>Price</th> 
     <th>Actions</th> 
     <th>Desactivation</th> 

    </tr> 
    </thead> 

    <tbody> 
    {% for catalogue in catalogues %} 
    <tr class="table"> 

     <td>{{ catalogue.product}} </td> 
     <td>{{ catalogue.description }} </td> 
     <td>{{ catalogue.size}} </td> 
     <td>{{ catalogue.charge }} </td> 
     <td>{{ catalogue.price }}</td> 
     <td> 
      <a href="{{ path('catalogue_list_edit', { 'id': catalogue.id }) }}"><span class="glyphicon glyphicon-edit"></span></a> 
      <a href="{{ path('catalogue_list_delete', { 'id': catalogue.id }) }}"><span class="glyphicon glyphicon-remove"></span></a> 
     </td> 
      <td><input type="checkbox" name="boutton35" value="Desactivation" /> 
     </td> 

    </tr> 

    {% else %} 
    {% endfor %} 

    </tbody> 
     </table> 

{% endblock %} 

Answer 1

$('.hideshow').on('click',function(){ 
 
    let cls = $(this).attr("data-id") 
 
    if ($('#'+cls).css('display') == 'none'){ 
 
    $('.table tbody').find('#'+cls).show(); 
 
    }else{ 
 
    $('.table tbody').find('#'+cls).hide(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="container"> 
 
    <h3>List of products</h3> 
 

 
    <div class="buttons"> 
 
    <button type="button" data-id="tr1" class="hideshow">Hide/Show Row 1</button> 
 
    <button type="button" data-id="tr2" class="hideshow">Hide/Show Row 2</button> 
 
    <button type="button" data-id="tr3" class="hideshow">Hide/Show Row 3</button> 
 
    </div> 
 
    <table class="table table-striped"> 
 
    <thead> 
 
     <tr> 
 
     <th>Product</th> 
 
     <th>Description</th> 
 
     <th>Size</th> 
 
     <th>Charges</th> 
 
     <th>Price</th> 
 
     <th>Actions</th> 
 
     <th>Desactivation</th> 
 
     </tr> 
 
    </thead> 
 

 
    <tbody> 
 
     <tr id="tr1"> 
 
     <td>Product </td> 
 
     <td>Description </td> 
 
     <td>Size </td> 
 
     <td>Charges </td> 
 
     <td>Price</td> 
 
     <td> 
 
      <a href="#">Edit</a> 
 
      <a href="#">Remove</a> 
 
     </td> 
 
     <td><input type="checkbox" name="boutton35" value="Desactivation" /> 
 
     </td> 
 
     </tr> 
 
     <tr id="tr2"> 
 
     <td>Product </td> 
 
     <td>Description </td> 
 
     <td>Size </td> 
 
     <td>Charges </td> 
 
     <td>Price</td> 
 
     <td> 
 
      <a href="#">Edit</a> 
 
      <a href="#">Remove</a> 
 
     </td> 
 
     <td><input type="checkbox" name="boutton35" value="Desactivation" /> 
 
     </td> 
 
     </tr> 
 
     <tr id="tr3"> 
 
     <td>Product </td> 
 
     <td>Description </td> 
 
     <td>Size </td> 
 
     <td>Charges </td> 
 
     <td>Price</td> 
 
     <td> 
 
      <a href="#">Edit</a> 
 
      <a href="#">Remove</a> 
 
     </td> 
 
     <td><input type="checkbox" name="boutton35" value="Desactivation" /> 
 
     </td> 
 
     </tr> 
 
    </tbody> 
 
    </table>