[英]Hide table row(s) in twig with symfony
I'm starting coding. 我正在开始编码。 I'm using Symfony 3.3 I would like to hide ( and show ) a or some specifics rows on a table with a checkbox. 我正在使用Symfony 3.3,我想用复选框隐藏(并显示)表上的a或某些特定行。 I tried with javascript and jquery. 我尝试使用javascript和jquery。 I would like that the hidden rows stay hide. 我希望隐藏的行保持隐藏状态。 I don't know how to do this. 我不知道该怎么做。 Here is my twig 这是我的树枝
{% 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 %}
$('.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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.