Qual è il metodo migliore per rimuovere una riga di tabella con jQuery?
Risposte:
Hai ragione:
$('#myTableRow').remove();Funziona bene se la tua riga ha un id, come ad esempio:
<tr id="myTableRow"><td>blah</td></tr>Se non ne hai uno id, puoi usare una qualsiasi delle pletora di selettori di jQuery .
$('#myTable tr').click(function(){
$(this).remove();
return false;
});Anche meglio
$("#MyTable").on("click", "#DeleteButton", function() {
$(this).closest("tr").remove();
});Supponendo che tu abbia un pulsante / collegamento all'interno di una cella di dati nella tua tabella, qualcosa del genere farebbe il trucco ...
$(".delete").live('click', function(event) {
$(this).parent().parent().remove();
});Ciò rimuoverà il genitore del genitore del pulsante / collegamento su cui si fa clic. Devi usare parent () perché è un oggetto jQuery, non un normale oggetto DOM, e devi usare parent () due volte, perché il pulsante vive all'interno di una cella di dati, che vive all'interno di una riga .... cosa vuoi rimuovere. $ (questo) è il pulsante selezionato, quindi semplicemente avere qualcosa di simile rimuoverà solo il pulsante:
$(this).remove();Mentre questo rimuoverà la cella di dati:
$(this).parent().remove();Se vuoi semplicemente fare clic in un punto qualsiasi della riga per rimuoverlo, qualcosa del genere funzionerebbe. Puoi facilmente modificarlo per richiedere all'utente o lavorare solo con un doppio clic:
$(".delete").live('click', function(event) {
$(this).parent().remove();
});Spero che aiuti ... Ho faticato un po 'su questo me stesso.
Puoi usare:
$($(this).closest("tr"))per trovare la riga della tabella padre di un elemento.
È più elegante di parent (). Parent () che è quello che ho iniziato a fare e presto ho imparato l'errore dei miei modi.
--Modifica - Qualcuno ha sottolineato che la domanda riguardava la rimozione della riga ...
$($(this).closest("tr")).remove()Come indicato di seguito puoi semplicemente fare:
$(this).closest('tr').remove();Uno snippet di codice simile può essere utilizzato per molte operazioni come l'attivazione di eventi su più elementi.
$(this).closest("tr").remove()
Facile .. Prova questo
$("table td img.delete").click(function () {
$(this).parent().parent().parent().fadeTo(400, 0, function () {
$(this).remove();
});
return false;
});$(this).parent().parent().parent()in $(this).closest('tr'). È più robusto e mostra chiaramente ciò che stai selezionando.
È accettabile quanto segue:
$('#myTableRow').remove();function removeRow(row) {
$(row).remove();
}
<tr onmousedown="removeRow(this)"><td>Foo</td></tr>Forse potrebbe funzionare anche qualcosa del genere? Non ho provato a fare qualcosa con "questo", quindi non so se funziona o no.
Tutto quello che devi fare è rimuovere il <tr>tag row ( ) dalla tabella. Ad esempio, ecco il codice per rimuovere l'ultima riga dalla tabella:
$('#myTable tr:last').remove();
* Il codice sopra è stato preso da questo post HowQuo di jQuery .
prova questo per dimensioni
$(this).parents('tr').first().remove();elenco completo:
<!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>Un altro di empty():
$(this).closest('tr').empty();Se la riga che desideri eliminare potrebbe cambiare, puoi usarla. Basta passare questa funzione alla riga # che si desidera eliminare.
function removeMyRow(docRowCount){
$('table tr').eq(docRowCount).remove();
}$('tr').click(function()
{
$(this).remove();
});penso che proverai il codice sopra, come funziona, ma non so perché funzioni per qualche tempo e quindi l'intera tabella viene rimossa. sto anche cercando di rimuovere la riga facendo clic sulla riga. ma non sono riuscito a trovare la risposta esatta.
se hai HTML come questo
<tr>
<td><span class="spanUser" userid="123"></span></td>
<td><span class="spanUser" userid="123"></span></td>
</tr>dove userid="123"è un attributo personalizzato che puoi popolare dinamicamente quando compili la tabella,
puoi usare qualcosa del genere
$(".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.');
}
});
});Quindi in quel caso non conosci la classe o l'id del TRtag ma comunque riesci a eliminarlo.
Apprezzo che questo sia un vecchio post, ma stavo cercando di fare lo stesso e ho scoperto che la risposta accettata non funzionava per me. Supponendo che JQuery sia passato da quando è stato scritto.
Comunque, ho trovato il seguente ha funzionato per me:
$('#resultstbl tr[id=nameoftr]').remove();Non sono sicuro se questo aiuta qualcuno. Il mio esempio sopra faceva parte di una funzione più grande, quindi non lo avvolgevo in un listener di eventi.
Se si utilizzano tabelle Bootstrap
aggiungi questo snippet di codice al tuo 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);
};Quindi nel tuo var allowedMethods = [
Inserisci 'removeRow'
Finalmente puoi usare $("#your-table").bootstrapTable('removeRow',{index:1});
id non è un buon selettore ora. È possibile definire alcune proprietà nelle righe. E puoi usarli come selettore.
<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>e puoi usare una funzione per selezionare la riga in questo modo (ES6):
const rowRemover = (category,type)=>{
$(`tr[category=${category}][type=${type}]`).remove();
}
rowRemover('petshop','fish');Il metodo più semplice per rimuovere le righe dalla tabella:
Per esempio:
<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