Jaka jest najlepsza metoda usuwania wiersza tabeli za pomocą jQuery?
Odpowiedzi:
Masz rację:
$('#myTableRow').remove();Działa to dobrze, jeśli Twój wiersz zawiera id:
<tr id="myTableRow"><td>blah</td></tr>Jeśli nie masz id, możesz użyć dowolnego z wielu selektorów jQuery .
$('#myTable tr').click(function(){
$(this).remove();
return false;
});Jeszcze lepszy
$("#MyTable").on("click", "#DeleteButton", function() {
$(this).closest("tr").remove();
});Zakładając, że masz przycisk / łącze w komórce danych w tabeli, coś takiego by załatwiło sprawę ...
$(".delete").live('click', function(event) {
$(this).parent().parent().remove();
});Spowoduje to usunięcie elementu nadrzędnego elementu nadrzędnego klikniętego przycisku / łącza. Musisz użyć parent (), ponieważ jest to obiekt jQuery, a nie normalny obiekt DOM, i musisz użyć parent () dwa razy, ponieważ przycisk znajduje się w komórce danych, która znajduje się w wierszu .... który jest co chcesz usunąć. $ (this) to kliknięty przycisk, więc samo posiadanie czegoś takiego spowoduje usunięcie tylko przycisku:
$(this).remove();Chociaż spowoduje to usunięcie komórki danych:
$(this).parent().remove();Jeśli chcesz po prostu kliknąć dowolne miejsce w wierszu, aby je usunąć, coś takiego działałoby. Możesz to łatwo zmienić, aby monitować użytkownika lub pracować tylko przy podwójnym kliknięciu:
$(".delete").live('click', function(event) {
$(this).parent().remove();
});Mam nadzieję, że to pomaga ... Sam trochę sobie z tym poradziłem.
Możesz użyć:
$($(this).closest("tr"))do znalezienia wiersza tabeli nadrzędnej elementu.
Jest bardziej elegancki niż parent (). Parent (), co właśnie zacząłem robić i wkrótce nauczyłem się błędów na swoich drogach.
--Edytuj - ktoś wskazał, że chodziło o usunięcie wiersza ...
$($(this).closest("tr")).remove()Jak wskazano poniżej, możesz po prostu zrobić:
$(this).closest('tr').remove();Podobny fragment kodu można zastosować do wielu operacji, takich jak uruchamianie zdarzeń na wielu elementach.
$(this).closest("tr").remove()
Łatwo .. Spróbuj tego
$("table td img.delete").click(function () {
$(this).parent().parent().parent().fadeTo(400, 0, function () {
$(this).remove();
});
return false;
});$(this).parent().parent().parent()na $(this).closest('tr'). Jest bardziej solidny i wyraźnie pokazuje, co wybierasz.
Czy dopuszczalne jest:
$('#myTableRow').remove();function removeRow(row) {
$(row).remove();
}
<tr onmousedown="removeRow(this)"><td>Foo</td></tr>Może coś takiego może również działać? Nie próbowałem robić czegoś z „tym”, więc nie wiem, czy to działa, czy nie.
Wszystko, co musisz zrobić, to usunąć <tr>tag table ( ) z tabeli. Na przykład tutaj jest kod do usunięcia ostatniego wiersza z tabeli:
$('#myTable tr:last').remove();
* Powyższy kod pochodzi z tego postu jQuery Howto .
spróbuj tego dla rozmiaru
$(this).parents('tr').first().remove();pełna lista:
<!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>Kolejny empty():
$(this).closest('tr').empty();Jeśli wiersz, który chcesz usunąć, może się zmienić, możesz go użyć. Po prostu przekaż tej funkcji wiersz #, który chcesz usunąć.
function removeMyRow(docRowCount){
$('table tr').eq(docRowCount).remove();
}$('tr').click(function()
{
$(this).remove();
});myślę, że wypróbujesz powyższy kod, ponieważ działa, ale nie wiem, dlaczego to działa przez jakiś czas, a następnie cała tabela jest usuwana. Próbuję również usunąć wiersz, klikając wiersz. ale nie mogłem znaleźć dokładnej odpowiedzi.
jeśli masz taki HTML
<tr>
<td><span class="spanUser" userid="123"></span></td>
<td><span class="spanUser" userid="123"></span></td>
</tr>gdzie userid="123"jest niestandardowy atrybut, który można dynamicznie wypełniać podczas tworzenia tabeli,
możesz użyć czegoś takiego
$(".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.');
}
});
});W takim przypadku nie znasz klasy lub identyfikatora TRtagu, ale i tak możesz go usunąć.
Doceniam, że to stary post, ale chciałem zrobić to samo i stwierdziłem, że zaakceptowana odpowiedź nie działała dla mnie. Zakładając, że JQuery przeszedł od momentu napisania tego tekstu.
W każdym razie okazało się, że dla mnie zadziałały:
$('#resultstbl tr[id=nameoftr]').remove();Nie jestem pewien, czy to komukolwiek pomaga. Mój przykład powyżej był częścią większej funkcji, więc nie zawijałem jej w detektorze zdarzeń.
Jeśli używasz tabel rozruchowych
dodaj ten fragment kodu do bootstrap_table.js
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);
};Potem w twoim var allowedMethods = [
Dodaj 'removeRow'
Wreszcie możesz użyć $("#your-table").bootstrapTable('removeRow',{index:1});
id nie jest teraz dobrym selektorem. Możesz zdefiniować niektóre właściwości w wierszach. I możesz użyć ich jako selektora.
<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>i możesz użyć func, aby wybrać taki wiersz (ES6):
const rowRemover = (category,type)=>{
$(`tr[category=${category}][type=${type}]`).remove();
}
rowRemover('petshop','fish');Najłatwiejsza metoda usunięcia wierszy z tabeli:
Na przykład:
<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