单击按钮时仅展开一行

Question

In my table I have a button which is supposed to expand only one row when its clicked, but right now when I click on the button it will expand all the rows. Can anyone please help me? Thanks in advance.

HTML:

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

JS:

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

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

    });

Answer 1

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

Answer 2

  $('.sendRMA').on("click", function () {
$(this).parents('tr').next().toggle("slow");
});

A working jsfiddle https://jsfiddle.net/xk82zagv/

Thanks.

Answer 3

This should work. You had duplicate id's in the HTML code. I used the product number as an unique id

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

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