單擊按鈕時僅展開一行

Question

在我的表格中，我有一個按鈕，當單擊該按鈕時，該按鈕只能擴展一行，但是現在，當我單擊該按鈕時，它將擴展所有行。 誰能幫幫我嗎？ 提前致謝。

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","");

    });

});

就是這樣，接下來必須使用...

Answer 2

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

正常工作的jsfiddle https://jsfiddle.net/xk82zagv/

謝謝。

Answer 3

這應該工作。 您在HTML代碼中有重復的ID。 我使用產品編號作為唯一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>