Computer >> Máy Tính >  >> Lập trình >> Javascript

Làm cách nào để xóa một hàng khỏi bảng bằng jQuery?

Sử dụng ủy quyền sự kiện để bao gồm các nút cho cả việc thêm mới và xóa hàng trong bảng trên trang web bằng jQuery.

Đầu tiên, đặt nút xóa:

<button type="button" class="deletebtn" title="Remove row">X</button>

Để kích hoạt sự kiện khi nhấp vào nút, hãy sử dụng phương thức jQuery on ():

$(document).on('click', 'button.deletebtn', function () {
   $(this).closest('tr').remove();
   return false;
});

Sau đây là toàn bộ mã xóa một hàng khỏi bảng bằng jQuery:

Ví dụ

<!DOCTYPE html>
<html>
<head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
   <script>
   $(document).ready(function(){
      var x = 1;
      $("#newbtn").click(function () {
         $("table tr:first").clone().find("input").each(function () {
            $(this).val('').attr({
               'id': function (_, id) {
                     return id + x
               },
               'name': function (_, name) {
                  return name + x
               },
               'value': ''
         });
      }).end().appendTo("table");
      x++;
   });

   $(document).on('click', 'button.deletebtn', function () {
      $(this).closest('tr').remove();
      return false;
   });
});
</script>
</head>
<body>
<table>
<tr>
<td>
<button type="button" class="deletebtn" title="Remove row">X</button>
</td>
<td>
<input type="text" id="txtTitle" name="txtTitle">
</td>
<td>
<input type="text" id="txtLink" name="txtLink">
</td>
</tr>
</table>
<button id="newbtn">Add new Row</button>
</body>
</html>