Hướng dẫn javascript delete table row onclick - javascript xóa hàng trong bảng bằng cách nhấp chuột

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" onclick="SomeDeleteRowFunction()"></td>
   </tr>
   <tr>
       <td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction()"></td>
   </tr>
   <tr>
       <td><input type="button" value="Delete Row" onclick="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()
})

$('table').on('click', 'input[type="button"]', function(e){
   $(this).closest('tr').remove()
})

$('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" onclick="SomeDeleteRowFunction(this)"></td>
       </tr>
       <tr>
           <td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this)"></td>
       </tr>
       <tr>
           <td><input type="button" value="Delete Row" onclick="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()
})

$('table').on('click', 'input[type="button"]', function(e){
   $(this).closest('tr').remove()
})

<td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction()"></td>

Hàm onclick:

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" onclick="SomeDeleteRowFunction(this);">
    </td>
  </tr>
  <tr>
    <td>
      <input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this);">
    </td>
  </tr>
  <tr>
    <td>
      <input type="button" value="Delete Row" onclick="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 http://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="https://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

Làm thế nào để bạn xóa một hàng trong một bảng bằng JavaScript?

Làm cách nào để thêm nút xóa hàng trong bảng?