web-dev-qa-db-fra.com

Quel est le meilleur moyen de supprimer une ligne de tableau avec jQuery?

Quelle est la meilleure méthode pour supprimer une ligne de tableau avec jQuery?

javascriptjqueryhtml-table
285
Darryl Hein

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 n'importe laquelle des nombreuses sélecteurs de jQuery .

399
imjoevasquez
$('#myTable tr').click(function(){
    $(this).remove();
    return false;
});
98
nickf

En supposant que vous ayez 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 sur lequel vous cliquez. 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 se trouve dans une ligne .... qui est ce que vous voulez enlever. $ (this) est le bouton sur lequel vous avez cliqué, il suffit donc d'avoir quelque chose comme ceci pour ne supprimer que le bouton:

$(this).remove();

Bien que cela supprime la cellule de données:

    $(this).parent().remove();

Si vous souhaitez simplement cliquer n'importe où sur la ligne pour la supprimer, cela fonctionnera. Vous pouvez facilement le modifier pour demander à l'utilisateur ou ne travailler que sur un double-clic:

$(".delete").live('click', function(event) {
    $(this).parent().remove();
});

J'espère que ça aide ... J'ai un peu lutté moi-même.

58
sluther

Vous pouvez utiliser:

$($(this).closest("tr"))

pour trouver la rangée 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 compris l’erreur de mes manières.

--Modage - Quelqu'un a fait remarquer que la question concernait 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.

42
Ian Lewis

Facile .. Essayez ceci

$("table td img.delete").click(function () {
    $(this).parent().parent().parent().fadeTo(400, 0, function () { 
        $(this).remove();
    });
    return false;
});
15
Thurein

Est-ce que ce qui suit est acceptable:

$('#myTableRow').remove();
9
Darryl Hein
function removeRow(row) {
    $(row).remove();
}

<tr onmousedown="removeRow(this)"><td>Foo</td></tr>

Peut-être que quelque chose comme ceci 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.

8
Eikern

Tout ce que vous avez à faire est de supprimer la balise de la rangée du tableau (<tr>) de votre tableau. Par exemple, voici le code pour supprimer la dernière ligne de la table:

$('#myTable tr:last').remove();

* Le code ci-dessus a été pris de this jQuery Howto post .

8
Uzbekjon

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>

le voir en action

7
Tim Abell

Un autre par empty():

$(this).closest('tr').empty();
4
Pichet Thantipiputpinyo

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();
}
2
silvster27
$('tr').click(function()
 {
  $(this).remove();
 });

je pense que vous allez essayer le code ci-dessus, car cela fonctionne, mais je ne sais pas pourquoi cela fonctionne pendant un certain temps et ensuite la table entière est supprimée. J'essaie également de supprimer la ligne en cliquant dessus. mais n'a pas pu trouver la réponse exacte.

1
Asim Sajjad

J'apprécie qu'il s'agisse d'un ancien message, 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 ait évolué depuis sa rédaction.

Quoi qu'il en soit, j'ai trouvé ce qui suit fonctionné pour moi:

$('#resultstbl tr[id=nameoftr]').remove();

Pas sûr que cela aide quelqu'un. Mon exemple ci-dessus faisait partie d'une fonction plus importante, donc ne l'enveloppez pas dans un écouteur d'événement.

1
SparkyUK2104

si vous avez du HTML comme ça

<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 renseigner de manière dynamique 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 vous pouvez quand même le supprimer.

1
Developer

Si vous utilisez Bootstrap Tables

ajoutez cet extrait de code à votre fichier 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});

Crédits à ce post

0
RickS