Question

在我的表格中，我有button，当单击它时，它应该扩展行，这就是我在Javascript中导航的方式，但是当{strong> only button获得my problem is when i clicked everywhere in table it will expandig rows，但我想扩展行时，点击。

我的问题是我应该如何在JavaScript中导航？！

JS：

$.ajax({
    type: "POST",
    url: "",
    data: ,
    success: function (result) {
        $("#DIV").html('');
        var rows = "";
  $.each(result, function (i, e) {

      rows += '<tr class="RMAJS">';
      rows += '<td id="varnummer" name="varnummer">' + e.varnummer + '</td>';
      rows += '<td id="Beskrivelse" name="Beskrivelse">' + e.Beskrivelse + '</td>';

      rows += '<td><button type="submit" class="sendRMA">Anmod om RMA</button></td>';

      rows += '</tr>';

      rows += '<tr style="display:none;" class="section">';
      rows += '<td>test</td>'
      rows += '</tr>';

 }); //End of foreach Loop

        $('#ResultProduct').append(rows);

    }
})

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>

在这里我将提出3种Javascript：

第一个不仅在单击按钮时会扩展行，而且在我单击表中的所有位置时也会扩展行

$('#ResultProduct').on("click", ".RMAJS", function () {
    $(this).next('.section').toggle("slow");  });

当我单击按钮时，第二个和第三个不会扩展行：

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

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

Answer 1

您丢失了closest，因此您不应该使用next，因为next将是next元素，但是您的部分位于tr旁边，而不是td旁边，因此您必须先找到tr，然后再找到下一部分

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

$('.sendRMA').on("click", function() {
  $(this).closest('tr').next('.section').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 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>

仅在单击按钮时扩展行

1 个答案: