Giải pháp có thể sử dụng jQuery hoặc là javascript đơn giản.
Tôi muốn xóa một hàng bảng sau khi người dùng nhấp vào nút tương ứng có trong ô hàng bảng, ví dụ: ví dụ:
<script> function SomeDeleteRowFunction() { //no clue what to put here? } </script> <table> <tr> <td><input type="button" value="Delete Row" title="SomeDeleteRowFunction()"></td> </tr> <tr> <td><input type="button" value="Delete Row" title="SomeDeleteRowFunction()"></td> </tr> <tr> <td><input type="button" value="Delete Row" title="SomeDeleteRowFunction()"></td> </tr> </table>
hỏi ngày 19 tháng 7 năm 2012 lúc 4:04Jul 19, 2012 at 4:04
like-a-traineelike-a-traineelike-a-trainee
5113 Huy hiệu vàng12 Huy hiệu bạc22 Huy hiệu đồng3 gold badges12 silver badges22 bronze badges
0
Bạn có thể sử dụng JQuery $('table').on('click', 'input[type="button"]', function(e){ $(this).closest('tr').remove() }) 0 thay vì sử dụng thuộc tính $('table').on('click', 'input[type="button"]', function(e){ $(this).closest('tr').remove() }) 1, hãy thử những điều sau:
$('table').on('click', 'input[type="button"]', function(e){ $(this).closest('tr').remove() })Thử nghiệm
Đã trả lời ngày 19 tháng 7 năm 2012 lúc 4:06Jul 19, 2012 at 4:06
2
Bạn có thể làm điều đó như thế này:
<script> function SomeDeleteRowFunction(o) { //no clue what to put here? var p=o.parentNode.parentNode; p.parentNode.removeChild(p); } </script> <table> <tr> <td><input type="button" value="Delete Row" title="SomeDeleteRowFunction(this)"></td> </tr> <tr> <td><input type="button" value="Delete Row" title="SomeDeleteRowFunction(this)"></td> </tr> <tr> <td><input type="button" value="Delete Row" title="SomeDeleteRowFunction(this)"></td> </tr> </table>Đã trả lời ngày 19 tháng 7 năm 2012 lúc 4:15Jul 19, 2012 at 4:15
SirensirenSiren
4263 Huy hiệu bạc4 Huy hiệu đồng3 silver badges4 bronze badges
3
Sử dụng JavaScript thuần túy:
Không cần phải chuyển $('table').on('click', 'input[type="button"]', function(e){ $(this).closest('tr').remove() }) 2 cho $('table').on('click', 'input[type="button"]', function(e){ $(this).closest('tr').remove() }) 3:
<td><input type="button" value="Delete Row" title="SomeDeleteRowFunction()"></td>Hàm title:
function SomeDeleteRowFunction() { // event.target will be the input element. var td = event.target.parentNode; var tr = td.parentNode; // the row to be removed tr.parentNode.removeChild(tr); }Đã trả lời ngày 31 tháng 10 năm 2018 lúc 13:57Oct 31, 2018 at 13:57
A-SharabianiA-SharabianiA-Sharabiani
16.5K16 Huy hiệu vàng106 Huy hiệu bạc126 Huy hiệu Đồng16 gold badges106 silver badges126 bronze badges
Giải pháp sau đang hoạt động tốt.
HTML:
<table> <tr> <td> <input type="button" value="Delete Row" title="SomeDeleteRowFunction(this);"> </td> </tr> <tr> <td> <input type="button" value="Delete Row" title="SomeDeleteRowFunction(this);"> </td> </tr> <tr> <td> <input type="button" value="Delete Row" title="SomeDeleteRowFunction(this);"> </td> </tr> </table>JQuery:
function SomeDeleteRowFunction(btndel) { if (typeof(btndel) == "object") { $(btndel).closest("tr").remove(); } else { return false; } }Tôi đã thực hiện các thùng trên //codebins.com/bin/4ldqpa9
Đã trả lời ngày 19 tháng 7 năm 2012 lúc 6:12Jul 19, 2012 at 6:12
gaurang171gaurang171gaurang171
8.9934 Huy hiệu vàng27 Huy hiệu bạc 30 Huy hiệu Đồng4 gold badges27 silver badges30 bronze badges
0
Như @gaurang171 đã đề cập, chúng ta có thể sử dụng .closest () sẽ trả về tổ tiên đầu tiên hoặc gần nhất với nút xóa của chúng ta và sử dụng .remove () để xóa nó.
Đây là cách chúng tôi có thể triển khai nó bằng sự kiện JQuery Click thay vì sử dụng JavaScript Onclick.
$(document).ready(function(){ $("#myTable").on('click','.btnDelete',function(){ $(this).closest('tr').remove(); }); });table{ width: 100%; border-collapse: collapse; } table td{ border: 1px solid black; } button:hover{ cursor: pointer; }<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="myTable"> <tr> <th>ID</th> <th >Name</th> <th>Age</th> <th width="1%"></th> </tr> <tr> <td >SSS-001</td> <td >Ben</td> <td >25</td> <td><button type='button' class='btnDelete'>x</button></td> </tr> <tr> <td >SSS-002</td> <td >Anderson</td> <td >47</td> <td><button type='button' class='btnDelete'>x</button></td> </tr> <tr> <td >SSS-003</td> <td >Rocky</td> <td >32</td> <td><button type='button' class='btnDelete'>x</button></td> </tr> <tr> <td >SSS-004</td> <td >Lee</td> <td >15</td> <td><button type='button' class='btnDelete'>x</button></td> </tr>
Đã trả lời ngày 29 tháng 1 năm 2021 lúc 11:57Jan 29, 2021 at 11:57
NcxnavncxnavNcXNaV
1.5784 Huy hiệu vàng12 Huy hiệu bạc22 Huy hiệu đồng4 gold badges12 silver badges22 bronze badges