Koila69 Koila69 - 2 months ago 29
Twig Question

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.
I tried with javascript and 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 %}

Answer Source

$('.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>