Quelle est la meilleure façon de supprimer une ligne de table avec jQuery?
Quelle est la meilleure méthode pour supprimer une ligne de table avec jQuery?
17 réponses
Vous avez raison:
$('#myTableRow').remove();
Cela fonctionne bien si votre ligne a un id, tel que:
<tr id="myTableRow"><td>blah</td></tr>
Si vous n'avez pas de id, vous pouvez utiliser du jQuery pléthore de sélecteurs.
En Supposant que vous avez un bouton/lien à l'intérieur d'une cellule de données dans votre tableau, quelque chose comme cela ferait l'affaire...
$(".delete").live('click', function(event) {
$(this).parent().parent().remove();
});
Cela supprimera le parent du parent du bouton/lien sur lequel vous avez cliqué. Vous devez utiliser parent() car il s'agit d'un objet jQuery, pas d'un objet DOM normal, et vous devez utiliser parent () deux fois, car le bouton vit dans une cellule de données, qui vit dans une ligne....qui est ce que vous voulez supprimer. $(this) est le bouton cliqué, donc simplement avoir quelque chose comme cela supprimera seulement le bouton:
$(this).remove();
Alors que cela supprimera la cellule de données:
$(this).parent().remove();
Si vous voulez simplement cliquer n'importe où sur la ligne pour l'enlever quelque chose comme ça fonctionnerait. Vous pouvez facilement modifier ceci pour inviter l'utilisateur ou travailler uniquement sur un double-clic:
$(".delete").live('click', function(event) {
$(this).parent().remove();
});
J'espère que ça aide...Je me suis un peu battu là-dessus moi-même.
, Vous pouvez utiliser:
$($(this).closest("tr"))
Pour trouver la ligne de table parent d'un élément.
Il est plus élégant que parent ().parent() qui est ce que j'ai commencé à faire et vite appris l'erreur de mes moyens.
-- Modifier -- Quelqu'un a souligné que la question portait sur la suppression de la ligne...
$($(this).closest("tr")).remove()
Comme indiqué ci-dessous, vous pouvez simplement faire:
$(this).closest('tr').remove();
Un extrait de code similaire peut être utilisé pour de nombreuses opérations telles que des événements de déclenchement sur plusieurs éléments.
Facile.. Essayez ceci
$("table td img.delete").click(function () {
$(this).parent().parent().parent().fadeTo(400, 0, function () {
$(this).remove();
});
return false;
});
Tout ce que vous avez à faire est de supprimer la balise table row (<tr>) de votre table. Par exemple, voici le code pour supprimer la dernière ligne de la table:
$('#myTable tr:last').remove();
*le Code ci-dessus a été tiré de ce poste HOWTO jQuery.
function removeRow(row) {
$(row).remove();
}
<tr onmousedown="removeRow(this)"><td>Foo</td></tr>
Peut-être que quelque chose comme ça pourrait fonctionner aussi bien? Je n'ai pas essayé de faire quelque chose avec "ceci", donc je ne sais pas si cela fonctionne ou non.
Essayez ceci pour la taille
$(this).parents('tr').first().remove();
Liste Complète:
<!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>
Autre par empty() :
$(this).closest('tr').empty();
Si la ligne que vous souhaitez supprimer peut changer, vous pouvez l'utiliser. Il suffit de passer cette fonction la ligne # que vous souhaitez supprimer.
function removeMyRow(docRowCount){
$('table tr').eq(docRowCount).remove();
}
$('tr').click(function()
{
$(this).remove();
});
Je pense que vous allez essayer le code ci-dessus, car il fonctionne, mais je ne sais pas pourquoi cela fonctionne pendant un certain temps, puis toute la table est supprimée. j'essaie également de supprimer la ligne en cliquant sur la ligne. mais n'a pas pu trouver la réponse exacte.
Si vous avez HTML comme ceci
<tr>
<td><span class="spanUser" userid="123"></span></td>
<td><span class="spanUser" userid="123"></span></td>
</tr>
Où userid="123" est un attribut personnalisé que vous pouvez remplir dynamiquement lorsque vous créez la table,
Vous pouvez utiliser quelque chose comme
$(".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.');
}
});
});
Donc, dans ce cas, vous ne connaissez pas la classe ou l'id de la balise TR mais de toute façon vous pouvez la supprimer.
J'apprécie que ce soit un vieux post, mais je cherchais à faire la même chose, et j'ai trouvé que la réponse acceptée ne fonctionnait pas pour moi. En supposant que JQuery a évolué depuis que cela a été écrit.
De toute façon, j'ai trouvé ce qui suit a fonctionné pour moi:
$('#resultstbl tr[id=nameoftr]').remove();
Je ne sais pas si cela aide quelqu'un. Mon exemple ci-dessus faisait partie d'une fonction afin de ne pas l'enveloppa d'un écouteur d'événement.
J'ai utilisé ceci dans mon Code:
> $("#tbl").on("click", ".delete-row", function () {
> $(this).closest('tr').remove();
> });
Id N'est pas un bon sélecteur maintenant. Vous pouvez définir certaines propriétés sur les lignes. Et vous pouvez les utiliser comme sélecteur.
<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>
Et vous pouvez utiliser une fonction pour sélectionner la ligne comme ceci (ES6):
const rowRemover = (category,type)=>{
$('tr[category=${category}][type=${type}]').remove();
}
rowRemover('petshot','fish');
Si vous utilisez des Tables Bootstrap
Ajoutez cet extrait de code à votre 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);
};
Puis dans votre var allowedMethods = [
Ajouter 'removeRow'
Enfin, vous pouvez utiliser $("#your-table").bootstrapTable('removeRow',{index:1});