Was ist die beste Methode zum Entfernen einer Tabellenzeile mit jQuery?
Antworten:
Du hast recht:
$('#myTableRow').remove();Dies funktioniert gut, wenn Ihre Zeile eine hat id, wie zum Beispiel:
<tr id="myTableRow"><td>blah</td></tr>Wenn Sie keine haben id, können Sie eine Vielzahl von Selektoren von jQuery verwenden .
$('#myTable tr').click(function(){
$(this).remove();
return false;
});Noch besser
$("#MyTable").on("click", "#DeleteButton", function() {
$(this).closest("tr").remove();
});Angenommen, Sie haben eine Schaltfläche / einen Link in einer Datenzelle in Ihrer Tabelle, dann würde so etwas den Trick machen ...
$(".delete").live('click', function(event) {
$(this).parent().parent().remove();
});Dadurch wird das übergeordnete Element des übergeordneten Elements der Schaltfläche / des Links entfernt, auf die / das geklickt wird. Sie müssen parent () verwenden, da es sich um ein jQuery-Objekt handelt, nicht um ein normales DOM-Objekt, und Sie müssen parent () zweimal verwenden, da sich die Schaltfläche in einer Datenzelle befindet, die sich in einer Zeile befindet was Sie entfernen möchten. $ (this) ist die Schaltfläche, auf die geklickt wird. Wenn Sie also einfach so etwas haben, wird nur die Schaltfläche entfernt:
$(this).remove();Während dies die Datenzelle entfernt:
$(this).parent().remove();Wenn Sie einfach auf eine beliebige Stelle in der Zeile klicken möchten, um sie zu entfernen, funktioniert so etwas. Sie können dies leicht ändern, um den Benutzer dazu aufzufordern, oder nur mit einem Doppelklick arbeiten:
$(".delete").live('click', function(event) {
$(this).parent().remove();
});Hoffe das hilft ... Ich habe mich selbst ein bisschen darum bemüht.
Sie können verwenden:
$($(this).closest("tr"))zum Suchen der übergeordneten Tabellenzeile eines Elements.
Es ist eleganter als parent (). Parent (), was ich anfing und bald den Fehler meiner Wege lernte.
--Edit - Jemand wies darauf hin, dass es um das Entfernen der Zeile ging ...
$($(this).closest("tr")).remove()Wie unten ausgeführt, können Sie einfach Folgendes tun:
$(this).closest('tr').remove();Ein ähnliches Code-Snippet kann für viele Vorgänge verwendet werden, z. B. zum Auslösen von Ereignissen für mehrere Elemente.
$(this).closest("tr").remove()
Einfach .. Versuchen Sie dies
$("table td img.delete").click(function () {
$(this).parent().parent().parent().fadeTo(400, 0, function () {
$(this).remove();
});
return false;
});$(this).parent().parent().parent()zu $(this).closest('tr'). Es ist robuster und zeigt deutlich, was Sie auswählen.
Ist folgendes akzeptabel:
$('#myTableRow').remove();function removeRow(row) {
$(row).remove();
}
<tr onmousedown="removeRow(this)"><td>Foo</td></tr>Vielleicht könnte so etwas auch funktionieren? Ich habe nicht versucht, etwas mit "diesem" zu tun, daher weiß ich nicht, ob es funktioniert oder nicht.
Sie müssen lediglich das <tr>Tag table row ( ) aus Ihrer Tabelle entfernen . Hier ist zum Beispiel der Code zum Entfernen der letzten Zeile aus der Tabelle:
$('#myTable tr:last').remove();
* Der obige Code stammt aus diesem jQuery Howto-Beitrag .
Versuchen Sie dies für die Größe
$(this).parents('tr').first().remove();vollständige Auflistung:
<!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>Ein anderer von empty():
$(this).closest('tr').empty();Wenn sich die zu löschende Zeile möglicherweise ändert, können Sie diese verwenden. Übergeben Sie dieser Funktion einfach die Zeile #, die Sie löschen möchten.
function removeMyRow(docRowCount){
$('table tr').eq(docRowCount).remove();
}$('tr').click(function()
{
$(this).remove();
});Ich denke, Sie werden den obigen Code ausprobieren, da er funktioniert, aber ich weiß nicht, warum er irgendwann funktioniert, und dann wird die gesamte Tabelle entfernt. Ich versuche auch, die Zeile durch Klicken auf die Zeile zu entfernen. konnte aber keine genaue Antwort finden.
wenn Sie HTML wie dieses haben
<tr>
<td><span class="spanUser" userid="123"></span></td>
<td><span class="spanUser" userid="123"></span></td>
</tr>Wo userid="123"ist ein benutzerdefiniertes Attribut, das Sie dynamisch füllen können, wenn Sie die Tabelle erstellen?
Sie können so etwas wie verwenden
$(".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.');
}
});
});In diesem Fall kennen Sie die Klasse oder ID des TRTags nicht, können es aber trotzdem löschen.
Ich schätze, dass dies ein alter Beitrag ist, aber ich habe versucht, dasselbe zu tun, und festgestellt, dass die akzeptierte Antwort bei mir nicht funktioniert hat. Angenommen, JQuery ist seit dem Schreiben weitergegangen.
Jedenfalls fand ich, dass Folgendes für mich funktioniert hat:
$('#resultstbl tr[id=nameoftr]').remove();Ich bin mir nicht sicher, ob dies jemandem hilft. Mein Beispiel oben war Teil einer größeren Funktion, also nicht in einen Ereignis-Listener eingeschlossen.
Wenn Sie Bootstrap-Tabellen verwenden
Fügen Sie dieses Code-Snippet zu Ihrer bootstrap_table.js hinzu
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);
};Dann in deinem var allowedMethods = [
hinzufügen 'removeRow'
Endlich können Sie verwenden $("#your-table").bootstrapTable('removeRow',{index:1});
id ist jetzt kein guter Selektor. Sie können einige Eigenschaften für die Zeilen definieren. Und Sie können sie als Selektor verwenden.
<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>und Sie können eine Funktion verwenden, um die Zeile wie folgt auszuwählen (ES6):
const rowRemover = (category,type)=>{
$(`tr[category=${category}][type=${type}]`).remove();
}
rowRemover('petshop','fish');Die einfachste Methode, um Zeilen aus der Tabelle zu entfernen:
Zum Beispiel:
<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