1
votes

Développer une seule ligne lorsque vous cliquez sur le bouton

Dans mon tableau, j'ai un bouton qui est censé ne développer qu'une seule ligne lorsque vous cliquez dessus, mais maintenant, lorsque je clique sur le bouton, il développera toutes les lignes. Est-ce que quelqu'un peut m'aider s'il vous plait? Merci d'avance.

HTML:

    $('#ResultProduct').on("click", ".RMAJS", function () {

        $('.section').closest('tr').toggle("slow");

    });

JS:

   <table class="table">
      <thead>
         <tr>
          <th>Varenummer</th>
          <th>Beskrivelse</th>
          <th></th>
          </tr>
      </thead>
  <tbody id="ResultProduct">
    <tr class="RMAJS">
       <td id="varnummer" name="varnummer">61A6MAT3</td>
       <td id="Beskrivelse" name="Beskrivelse">Lenovo T24</td>
       <td><button type="submit" class="sendRMA">Anmod om RMA</button></td>
    </tr>
   <tr style="display:none;" class="section">
    <td>test</td>
   </tr>

 <tr class="RMAJS">
           <td id="varnummer" name="varnummer">AMAT3</td>
           <td id="Beskrivelse" name="Beskrivelse">Dell</td>
           <td><button type="submit" class="sendRMA">Anmod om RMA</button></td>
  </tr>  
  <tr style="display:none;" class="section">
        <td>test</td>
  </tr>
  </tbody>
    </table>

javascript jquery

0 commentaires

3 Réponses :

0
votes

$('#ResultProduct > .RMAJS').each( function( i, el) {
    $(el).on("click", function (e) {
        $(this).next('.section').toggle("slow");
        // or $(this).next('.section').css("display","");

    });

});
that's it, got to use next ...

0 commentaires

0
votes

  $('.sendRMA').on("click", function () {
$(this).parents('tr').next().toggle("slow");
});
A working jsfiddle
https://jsfiddle.net/xk82zagv/Thanks.

1 commentaires

Merci Obaid :)

0
votes

Cela devrait fonctionner. Vous aviez des identifiants en double dans le code HTML. J'ai utilisé le numéro de produit comme identifiant unique

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table">
      <thead>
         <tr>
          <th>Varenummer</th>
          <th>Beskrivelse</th>
          <th></th>
          </tr>
      </thead>
  <tbody id="ResultProduct">
    <tr class="RMAJS">
       <td name="varnummer">61A6MAT3</td>
       <td name="Beskrivelse">Lenovo T24</td>
       <td><button data-id="61A6MAT3" class="sendRMA">Anmod om RMA</button></td>
    </tr>
   <tr id="61A6MAT3" style="display:none;" class="section">
    <td>test</td>
   </tr>

 <tr class="RMAJS">
           <td name="varnummer">AMAT3</td>
           <td name="Beskrivelse">Dell</td>
           <td><button data-id="AMAT3" class="sendRMA">Anmod om RMA</button></td>
  </tr>  
  <tr id="AMAT3" style="display:none;" class="section">
        <td>test</td>
  </tr>
  </tbody>
    </table>

 $('.RMAJS').on("click", ".sendRMA", function () {
        var showid = $(this).attr("data-id");
        $('#' + showid ).closest('tr').toggle("slow");

    });

0 commentaires