[英]Expanding rows only when button clicked
在我的表中我有button,當它單擊時它應該擴展行,這也是我在Javascript中導航的方式,但是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"); });
您缺少了最不應該使用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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.