Quelle est la meilleure méthode pour supprimer une ligne de tableau avec jQuery?
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'en avez pas id, vous pouvez utiliser n'importe quelle pléthore de sélecteurs jQuery .
$('#myTable tr').click(function(){
$(this).remove();
return false;
});Encore meilleur
$("#MyTable").on("click", "#DeleteButton", function() {
$(this).closest("tr").remove();
});En supposant que vous avez un bouton / lien à l'intérieur d'une cellule de données dans votre tableau, quelque chose comme ça ferait l'affaire ...
$(".delete").live('click', function(event) {
$(this).parent().parent().remove();
});Cela supprimera le parent du parent du bouton / lien cliqué. Vous devez utiliser parent () car il s'agit d'un objet jQuery, et non d'un objet DOM normal, et vous devez utiliser parent () deux fois, car le bouton réside dans une cellule de données, qui réside dans une ligne .... qui est ce que vous souhaitez supprimer. $ (this) est le bouton cliqué, donc simplement avoir quelque chose comme ça ne supprimera que le bouton:
$(this).remove();Bien que cela supprime la cellule de données:
$(this).parent().remove();Si vous voulez simplement cliquer n'importe où sur la ligne pour la supprimer, quelque chose comme ça fonctionnerait. Vous pouvez facilement modifier cela pour inviter l'utilisateur ou travailler uniquement sur un double-clic:
$(".delete").live('click', function(event) {
$(this).parent().remove();
});J'espère que cela aide ... J'ai moi-même lutté un peu là-dessus.
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 (), c'est ce que j'ai commencé à faire et j'ai vite appris l'erreur de mes manières.
--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 le déclenchement d'événements sur plusieurs éléments.
$(this).closest("tr").remove()
Facile .. Essayez ceci
$("table td img.delete").click(function () {
$(this).parent().parent().parent().fadeTo(400, 0, function () {
$(this).remove();
});
return false;
});$(this).parent().parent().parent()pour $(this).closest('tr'). Il est plus robuste et montre clairement ce que vous sélectionnez.
Est-ce que ce qui suit est acceptable:
$('#myTableRow').remove();function removeRow(row) {
$(row).remove();
}
<tr onmousedown="removeRow(this)"><td>Foo</td></tr>Peut-être que quelque chose comme ça pourrait aussi fonctionner? Je n'ai pas essayé de faire quelque chose avec "ça", donc je ne sais pas si ça marche ou pas.
Tout ce que vous avez à faire est de supprimer la <tr>balise row row ( ) de votre table. Par exemple, voici le code pour supprimer la dernière ligne du tableau:
$('#myTable tr:last').remove();
* Le code ci-dessus provient de ce post jQuery Howto .
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>Un autre par empty():
$(this).closest('tr').empty();Si la ligne que vous souhaitez supprimer peut changer, vous pouvez l'utiliser. Passez simplement 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 il fonctionne pendant un certain temps, puis la table entière 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 du HTML comme celui-ci
<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 TRbalise mais vous pouvez quand même le supprimer.
J'apprécie que c'est un ancien poste, mais je cherchais à faire de même, 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.
Quoi qu'il en soit, j'ai trouvé que ce qui suit fonctionnait 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 plus large, donc ne l'enveloppez pas dans un écouteur d'événements.
Si vous utilisez des tables d'amorçage
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});
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 celle-ci (ES6):
const rowRemover = (category,type)=>{
$(`tr[category=${category}][type=${type}]`).remove();
}
rowRemover('petshop','fish');La méthode la plus simple pour supprimer des lignes du tableau:
Par exemple:
<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