247
Phương pháp tốt nhất để loại bỏ hàng trong bảng bằng jQuery là gì?Cách tốt nhất để loại bỏ hàng trong bảng bằng jQuery là gì?
A
Trả lời
341
Bạn nói đúng:
$('#myTableRow').remove();
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ỳ jQuery nào .
+0
Vâng, tôi đã giả sử hàng có ID và bạn có ID :) –
+2
Làm theo cách này có nghĩa là bạn cần một id cho mỗi hàng có khả năng thêm rất nhiều chi phí. jQuery cho phép các phương pháp tiếp cận khác có nhiều thành ngữ hơn (theo cách tiếp cận của jQuery), tiếp tục đọc có nhiều đề xuất hơn. –
+0
Làm việc tuyệt vời cho tôi vì tôi đã có thể đặt id duy nhất trong mỗi hàng. –
6
7
function removeRow(row) {
$(row).remove();
}
<tr onmousedown="removeRow(this)"><td>Foo</td></tr>
Có thể điều gì đó như thế này cũng có thể hoạt động tốt? Tôi đã không thử làm một cái gì đó với "điều này", vì vậy tôi không biết nếu nó hoạt động hay không.
+1
Vâng, tôi sẽ nói rằng sẽ có một chút lạ có hàng biến mất khi bạn nhấp vào nó. Tại thời điểm này tôi có một liên kết trong hàng để xóa hàng. –
82
Nếu bạn sắp sử dụng jQuery, hãy sử dụng jQuery!
$('#myTable tr').click(function(){
$(this).remove();
return false;
});
+0
đẹp, rất không công cụ – imjoevasquez
+3
Lạ lùng, giải pháp của bạn là vô cùng tốt hơn so với chấp nhận. – Puzbie
+3
@jorg, chỉ cần đề cập đến nó, bạn có một lỗi đánh máy trong câu trả lời của bạn, sau khi. Nhấp chuột bạn phải đặt hàm() gọi lại – Franco
1
$('tr').click(function()
{
$(this).remove();
});
tôi nghĩ rằng bạn sẽ thử các mã trên, vì nó làm việc, nhưng tôi không biết tại sao nó làm việc cho một lúc và sau đó là toàn bộ bảng được lấy ra. tôi cũng đang cố gắng xóa 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.
+0
Tôi không chắc liệu bạn đã thử $ ('tr'). Live ("click", function() {$ (this) .remove();}); – gfivehost
49
Giả sử bạn có một nút/link bên trong một tế bào dữ liệu trong bảng của bạn, một cái gì đó như thế này sẽ làm các trick ...
$(".delete").live('click', function(event) {
$(this).parent().parent().remove();
});
này sẽ loại bỏ cha mẹ của phụ huynh của các nút/link được nhấp. Bạn cần sử dụng parent() vì nó là một đối tượng jQuery, không phải là đối tượng DOM bình thường và bạn cần sử dụng parent() hai lần, vì nút nằm bên trong một ô dữ liệu, nằm bên trong một hàng .... những gì bạn muốn loại bỏ. $ (This) là nút bấm, vì vậy chỉ đơn giản là 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ỏ các tế bào 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ẽ làm việc. Bạn có thể dễ dàng sửa đổi điều này để nhắc người dùng hoặc chỉ làm việc trên một nhấp đúp:
$(".delete").live('click', function(event) {
$(this).parent().remove();
});
Hy vọng điều đó sẽ giúp ... Tôi đã cố gắng vất vả một chút.
+20
Điều gì sẽ xảy ra nếu liên kết không trực tiếp bên trong td, nhưng có một khoảng bao quanh nó? Tôi nghĩ sẽ tốt hơn nếu bạn làm $ (this) .parents ('tr'). Remove(); để nó tự đi lên cây DOM, tìm tr và loại bỏ nó. –
+2
Điều đó cũng sẽ hoạt động. Tất cả phụ thuộc vào vị trí trong DOM của bạn nút/liên kết của bạn, đó là lý do tại sao tôi đã đưa ra rất nhiều ví dụ và giải thích dài như vậy. – sluther
+2
Bạn cũng có thể sử dụng $ (this) .parents ('tr') – cgreeno
8
Tất cả những gì bạn phải làm là xóa thẻ bảng (<tr>) khỏi bảng của bạn. Ví dụ ở đây là mã để loại bỏ các hàng cuối cùng từ bảng:
$('#myTable tr:last').remove();
* Mã trên được chụp từ this jQuery Howto post.
37
Bạn có thể sử dụng:
$($(this).closest("tr"))
cho việc tìm kiếm bảng hàng mẹ 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 tìm hiểu được lỗi của con đường của tôi.
--edit - Có người chỉ ra rằng vấn đề là về loại bỏ các hàng ...
$($(this).closest("tr")).remove()
Như đã chỉ ra bên dưới, bạn chỉ đơn giản có thể làm:
$(this).closest('tr').remove();
Một mã tương tự đoạn mã có thể được sử dụng cho nhiều thao tác chẳng hạn như kích hoạt sự kiện trên nhiều phần tử.
+3
Một chút gọn gàng hơn: '$ (this) .closest (" tr "). remove()' –
15
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;
});
+10
Tôi sẽ thay đổi '$ (this) .parent(). parent(). parent() 'to' $ (this) .closest ('tr') '. Nó mạnh mẽ hơn và hiển thị rõ ràng những gì bạn đang chọn. – nickf
7
thử 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>
2
Nếu hàng bạn muốn xóa sức chan Bạn có thể sử dụng nó. Chỉ cần chuyển hàm này hàng # bạn muốn xóa.
function removeMyRow(docRowCount){
$('table tr').eq(docRowCount).remove();
}
1
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à thuộc tính một tùy chỉnh mà bạn có thể cư tự động khi bạn xây dựng bàn,
bạn có thể sử dụng giống 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 th e TR nhưng bạn vẫn có thể xóa nó.
+0
nghĩ rằng hiện tại không còn được dùng nữa, $ (". SpanUser"). ('Click', function() { – Tofuwarrior
3
Một số khác bởi empty():
$(this).closest('tr').empty();
+1
Điều đó không loại bỏ tất cả
1
Tôi đánh giá cao này là một bài cũ, nhưng tôi đã tìm cách để làm như vậy, và tìm thấy câu trả lời chấp nhận không làm việc cho tôi. Giả sử JQuery đã chuyển sang kể từ khi nó được viết.
Nhưng dù sao, tôi thấy 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 được bao bọc trong trình xử lý sự kiện.
1
Tôi sử dụng này trong luật của tôi:
> $("#tbl").on("click", ".delete-row", function() {
> $(this).closest('tr').remove();
> });
0
id không phải là một 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 làm công cụ 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('petshot','fish');
Các vấn đề liên quan
- 1. Cách tốt nhất để loại bỏ div đầu tiên bên trong div cha bằng jQuery là gì?
- 2. Cách tốt nhất để loại bỏ các bản sao trong một mảng trong Java là gì?
- 3. Cách tốt nhất để hiển thị ASCII trong lưới bằng các bảng bằng Java là gì?
- 4. Thừa kế Bảng đơn Rails - Cách tốt nhất để đặt loại rõ ràng là gì?
- 5. FadeOut và loại bỏ hàng bảng
- 6. Cách tốt nhất để xử lý I18N trong bảng tra cứu là gì?
- 7. Cách tốt nhất để xác định các loại dữ liệu đại số bằng Python là gì?
- 8. Chọn hàng bảng trong jQuery
- 9. Cách tốt nhất để bỏ qua N giá trị của biến lặp trong Python là gì?
- 10. Cách tốt nhất để thu gọn các hàng của một SELECT thành một chuỗi là gì?
- 11. Cách tốt nhất để loại bỏ cảnh báo liên kết MS Visual C++ là gì: "cảnh báo LNK4221"?
- 12. cách tốt nhất để loại bỏ một tham số HttpServletRequest trong một bộ điều khiển/lớp học là gì?
- 13. cách tốt nhất để loại bỏ n ký tự cuối cùng của chuỗi (trong Ruby) là gì?
- 14. Hàng bảng Vaadin thay đổi cách thực hành tốt nhất
- 15. Làm thế nào để loại bỏ hàng hiện tại khỏi bảng trong jQuery?
- 16. Cách tốt nhất để tránh maven-jar là gì?
- 17. Cách tốt nhất để lớp trong Canvas HTML5 là gì?
- 18. Cách tốt nhất để tìm kiếm GitHub là gì?
- 19. cách tốt nhất để bắt "hủy thao tác bằng cách sử dụng" là gì ngoại lệ
- 20. Cách tốt nhất để phân tích chuỗi là gì?
- 21. Cách tốt nhất để làm jquery ui với các loại
- 22. Cách tốt nhất để chọn nhiều hàng theo ID trong sql là gì?
- 23. Cách tốt nhất để trượt một bảng điều khiển trong WPF là gì?
- 24. Cách tốt nhất để xóa tất cả bảng lớn trong t-sql là gì?
- 25. Cách tốt nhất để băm url trong ruby là gì?
- 26. jQuery loại bỏ bảng HTML cột
- 27. Cách tốt nhất để kiểm tra javascript là gì?
- 28. cách tốt nhất để kiểm tra loại biến trong javascript là gì
- 29. Cách tốt nhất để tham khảo jquery trong asp.net là gì?
- 30. Cách tốt nhất để thực hiện xác thực đầu vào trong C++ bằng cin là gì?
Dưới đây là bài báo xuất sắc http://codepedia.info/2015/02/remove-table-row- tr-in-jquery về cách loại bỏ hàng của bảng ngay cả đối với hàng được thêm động –