Câu trả lời:
Bạn đúng:
$('#myTableRow').remove();Điều này hoạt động tốt nếu hàng của bạn có một id, chẳng hạn như:
<tr id="myTableRow"><td>blah</td></tr>Nếu bạn không có id, bạn có thể sử dụng bất kỳ công cụ chọn nào của jQuery .
$('#myTable tr').click(function(){
$(this).remove();
return false;
});
Thậm chí tốt hơn
$("#MyTable").on("click", "#DeleteButton", function() {
$(this).closest("tr").remove();
});
Giả sử bạn có một nút / liên kết bên trong một ô dữ liệu trong bảng của mình, một cái gì đó như thế này sẽ thực hiện thủ thuật ...
$(".delete").live('click', function(event) {
$(this).parent().parent().remove();
});
Điều này sẽ loại bỏ cha mẹ của cha mẹ của nút / liên kết được nhấp. Bạn cần sử dụng Parent () vì nó là đối tượng jQuery, không phải đối tượng DOM bình thường và bạn cần sử dụng Parent () hai lần, vì nút này nằm trong một ô dữ liệu, nằm trong một hàng .... đó là những gì bạn muốn loại bỏ. $ (đây) là nút được nhấp, vì vậy chỉ cần có một cái gì đó như thế này sẽ chỉ xóa nút:
$(this).remove();Trong khi điều này sẽ loại bỏ ô dữ liệu:
$(this).parent().remove();Nếu bạn muốn chỉ cần nhấp vào bất cứ nơi nào trên hàng để loại bỏ nó, một cái gì đó như thế này sẽ hoạt động. Bạn có thể dễ dàng sửa đổi điều này để nhắc người dùng hoặc chỉ hoạt động khi nhấp đúp chuột:
$(".delete").live('click', function(event) {
$(this).parent().remove();
});
Hy vọng điều đó sẽ giúp ... Tôi đã đấu tranh với điều này một chút bản thân mình.
Bạn có thể dùng:
$($(this).closest("tr"))để tìm hàng bảng cha của một phần tử.
Nó thanh lịch hơn cha mẹ (). Parent () là những gì tôi bắt đầu làm và sớm biết được lỗi của mình.
- Chỉnh sửa - Ai đó đã chỉ ra rằng câu hỏi là về việc xóa hàng ...
$($(this).closest("tr")).remove()Như được chỉ ra dưới đây, bạn có thể chỉ cần làm:
$(this).closest('tr').remove();Một đoạn mã tương tự có thể được sử dụng cho nhiều hoạt động như bắn các sự kiện trên nhiều yếu tố.
$(this).closest("tr").remove()
Dễ dàng .. Hãy thử điều này
$("table td img.delete").click(function () {
$(this).parent().parent().parent().fadeTo(400, 0, function () {
$(this).remove();
});
return false;
});
$(this).parent().parent().parent()thành $(this).closest('tr'). Nó mạnh mẽ hơn và hiển thị rõ ràng những gì bạn đang chọn.
function removeRow(row) {
$(row).remove();
}
<tr onmousedown="removeRow(this)"><td>Foo</td></tr>
Có lẽ một cái gì đó như thế này cũng có thể làm việc? Tôi đã không thử làm một cái gì đó với "cái này", vì vậy tôi không biết nó có hoạt động hay không.
Tất cả bạn phải làm là xóa <tr>thẻ hàng ( ) khỏi bảng của bạn. Ví dụ ở đây là mã để loại bỏ hàng cuối cùng khỏi bảng:
$('#myTable tr:last').remove();
* Mã ở trên được lấy từ bài viết Howto jQuery này .
thử cái này cho kích thước
$(this).parents('tr').first().remove();danh sách đầy đủ:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.deleteRowButton').click(DeleteRow);
});
function DeleteRow()
{
$(this).parents('tr').first().remove();
}
</script>
</head>
<body>
<table>
<tr><td>foo</td>
<td><a class="deleteRowButton">delete row</a></td></tr>
<tr><td>bar bar</td>
<td><a class="deleteRowButton">delete row</a></td></tr>
<tr><td>bazmati</td>
<td><a class="deleteRowButton">delete row</a></td></tr>
</table>
</body>
</html>Một số khác bởi empty():
$(this).closest('tr').empty();Nếu hàng bạn muốn xóa có thể thay đổi, bạn có thể sử dụng hàng này. Chỉ cần vượt qua chức năng này hàng # bạn muốn xóa.
function removeMyRow(docRowCount){
$('table tr').eq(docRowCount).remove();
}$('tr').click(function()
{
$(this).remove();
});Tôi nghĩ rằng bạn sẽ thử mã ở trên, vì nó hoạt động, nhưng tôi không biết tại sao đôi khi nó hoạt động và sau đó toàn bộ bảng bị xóa. tôi cũng đang cố gắng loại bỏ hàng bằng cách nhấp vào hàng. nhưng không thể tìm thấy câu trả lời chính xác.
nếu bạn có HTML như thế này
<tr>
<td><span class="spanUser" userid="123"></span></td>
<td><span class="spanUser" userid="123"></span></td>
</tr>nơi userid="123"là một thuộc tính tùy chỉnh mà bạn có thể cư trú linh hoạt khi bạn xây dựng bảng,
bạn có thể sử dụng một cái gì đó như
$(".spanUser").live("click", function () {
var span = $(this);
var userid = $(this).attr('userid');
var currentURL = window.location.protocol + '//' + window.location.host;
var url = currentURL + "/Account/DeleteUser/" + userid;
$.post(url, function (data) {
if (data) {
var tdTAG = span.parent(); // GET PARENT OF SPAN TAG
var trTAG = tdTAG.parent(); // GET PARENT OF TD TAG
trTAG.remove(); // DELETE TR TAG == DELETE AN ENTIRE TABLE ROW
} else {
alert('Sorry, there is some error.');
}
});
});Vì vậy, trong trường hợp đó bạn không biết lớp hoặc id của TRthẻ nhưng dù sao bạn cũng có thể xóa nó.
Tôi đánh giá cao đây là một bài viết cũ, nhưng tôi đang tìm cách làm như vậy và thấy câu trả lời được chấp nhận không phù hợp với tôi. Giả sử JQuery đã chuyển từ khi nó được viết.
Dù sao, tôi tìm thấy những điều sau đây làm việc cho tôi:
$('#resultstbl tr[id=nameoftr]').remove();Không chắc chắn nếu điều này giúp bất cứ ai. Ví dụ của tôi ở trên là một phần của hàm lớn hơn nên không bao bọc nó trong trình nghe sự kiện.
Nếu bạn đang sử dụng Bảng Bootstrap
thêm đoạn mã này vào bootstrap_table.js của bạn
BootstrapTable.prototype.removeRow = function (params) {
if (!params.hasOwnProperty('index')) {
return;
}
var len = this.options.data.length;
if ((params.index > len) || (params.index < 0)){
return;
}
this.options.data.splice(params.index, 1);
if (len === this.options.data.length) {
return;
}
this.initSearch();
this.initPagination();
this.initBody(true);
};Sau đó trong của bạn var allowedMethods = [
thêm vào 'removeRow'
Cuối cùng bạn có thể sử dụng $("#your-table").bootstrapTable('removeRow',{index:1});
id không phải là một bộ chọn tốt bây giờ. Bạn có thể định nghĩa một số thuộc tính trên các hàng. Và bạn có thể sử dụng chúng như bộ chọn.
<tr category="petshop" type="fish"><td>little fish</td></tr>
<tr category="petshop" type="dog"><td>little dog</td></tr>
<tr category="toys" type="lego"><td>lego starwars</td></tr>và bạn có thể sử dụng một func để chọn hàng như thế này (ES6):
const rowRemover = (category,type)=>{
$(`tr[category=${category}][type=${type}]`).remove();
}
rowRemover('petshop','fish');Phương pháp dễ nhất để xóa hàng khỏi bảng:
Ví dụ:
<table id='myTable' border='1'>
<tr id='tr1'><td>Row1</td></tr>
<tr id='tr2'><td>Row2</td></tr>
<tr id='tr3'><td>Row3</td></tr>
<tr id='tr4'><td>Row4</td></tr>
<tr id='tr5'><td>Row5</td></tr>
</table>
//======REMOVE TABLE ROW=========
//1. remove spesific row using its ID
$('#tr1').remove();
//2. remove spesific row using its order or index.
//row index started from 0-n. Row1 index is 0, Row2 index is 1 and so on.
$('#myTable').find('tr:eq(2)').remove();//removing Row3