Ajouter une ligne de tableau en jQuery

Question

Quelle est la meilleure méthode en jQuery pour ajouter une ligne supplémentaire à un tableau en tant que dernière ligne ?

Est-ce acceptable ?

$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');

Y a-t-il des limites à ce que vous pouvez ajouter à un tableau comme celui-ci (comme les entrées, les sélections, le nombre de lignes) ?

Answer 1

L'approche que vous suggérez n'est pas garantie de vous donner le résultat que vous recherchez - et si vous aviez une tbody par exemple :

<table id="myTable">
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
</table>

Vous vous retrouveriez avec les éléments suivants :

<table id="myTable">
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
  <tr>...</tr>
</table>

Je recommande donc plutôt cette approche :

$('#myTable tr:last').after('<tr>...</tr><tr>...</tr>');

Vous pouvez inclure tout ce que vous voulez dans le champ after() pour autant qu'il s'agisse d'un code HTML valide, y compris les lignes multiples comme dans l'exemple ci-dessus.

Mise à jour : Je reviens sur cette réponse suite à une activité récente sur cette question. L'impassibilité fait un bon commentaire sur le fait qu'il y aura toujours un tbody dans le DOM ; c'est vrai, mais seulement s'il y a au moins une ligne. S'il n'y a pas de rangée, il n'y aura aucune tbody sauf si vous en avez spécifié un vous-même.

DaRKoN_ suggère en ajoutant à la tbody plutôt que d'ajouter du contenu après le dernier tr . Cela permet de contourner le problème de l'absence de rangées, mais ce n'est toujours pas infaillible, car vous pourriez théoriquement avoir de multiples tbody et la ligne sera ajoutée à chacun d'eux.

Tout bien pesé, je ne suis pas sûr qu'il existe une solution unique qui tienne compte de tous les scénarios possibles. Vous devrez vous assurer que le code jQuery correspond à votre balisage.

Je pense que la solution la plus sûre est probablement de s'assurer que vos table comprend toujours au moins un tbody dans votre balisage, même s'il ne comporte pas de lignes. Sur cette base, vous pouvez utiliser ce qui suit, qui fonctionnera quel que soit le nombre de lignes que vous avez (et qui tient également compte de l'existence de plusieurs fichiers tbody éléments) :

$('#myTable > tbody:last-child').append('<tr>...</tr><tr>...</tr>');

Answer 2

JQuery dispose d'une fonction intégrée permettant de manipuler les éléments du DOM à la volée.

Vous pouvez ajouter n'importe quoi à votre tableau comme ceci :

$("#tableID").find('tbody')
    .append($('<tr>')
        .append($('<td>')
            .append($('<img>')
                .attr('src', 'img.png')
                .text('Image cell')
            )
        )
    );

Le site $('<some-tag>') dans jQuery est un objet de balise qui peut avoir plusieurs attr qui peuvent être définis et récupérés, ainsi que des attributs text qui représente le texte entre les balises ici : <tag>text</tag> .

Il s'agit d'une indentation assez bizarre, mais il est plus facile pour vous de voir ce qui se passe dans cet exemple.

Answer 3

Les choses ont donc changé depuis @Luke Bennett a répondu à cette question. Voici une mise à jour.

Depuis la version 1.4( ?), jQuery détecte automatiquement si l'élément que vous essayez d'insérer (en utilisant l'un des éléments suivants append() , prepend() , before() ou after() méthodes) est un <tr> et l'insère dans le premier <tbody> dans votre tableau ou l'enroule dans un nouveau <tbody> s'il n'y en a pas.

Donc oui, votre exemple de code est acceptable et fonctionnera parfaitement avec jQuery 1.4+. ;)

$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');

Answer 4

Et si vous aviez un <tbody> et un <tfoot> ?

Par exemple :

<table>
    <tbody>
        <tr><td>Foo</td></tr>
    </tbody>
    <tfoot>
        <tr><td>footer information</td></tr>
    </tfoot>
</table>

Il insèrerait alors votre nouvelle ligne dans le pied de page - et non dans le corps.

La meilleure solution est donc d'inclure un <tbody> étiquette et utilisation .append plutôt que .after .

$("#myTable > tbody").append("<tr><td>row content</td></tr>");

Answer 5

Je sais que vous avez demandé une méthode jQuery. J'ai beaucoup cherché et j'ai trouvé que nous pouvons le faire d'une meilleure façon qu'en utilisant directement JavaScript par la fonction suivante.

tableObject.insertRow(index)

index est un nombre entier qui spécifie la position de la ligne à insérer (commence à 0). La valeur -1 peut également être utilisée, ce qui signifie que la nouvelle ligne sera insérée à la dernière position.

Ce paramètre est requis dans Firefox et Opéra mais elle est facultative dans Internet Explorer, Chrome et Safari .

Si ce paramètre est omis, insertRow() insère une nouvelle ligne à la dernière position dans Internet Explorer et à la première position dans Chrome et Safari.

Il fonctionnera pour toute structure acceptable de table HTML.

L'exemple suivant insère une ligne en dernier (-1 est utilisé comme index) :

<html>
    <head>
        <script type="text/javascript">
        function displayResult()
        {
            document.getElementById("myTable").insertRow(-1).innerHTML = '<td>1</td><td>2</td>';
        }
        </script>
    </head>

    <body>       
        <table id="myTable" border="1">
            <tr>
                <td>cell 1</td>
                <td>cell 2</td>
            </tr>
            <tr>
                <td>cell 3</td>
                <td>cell 4</td>
            </tr>
        </table>
        <br />
        <button type="button" onclick="displayResult()">Insert new row</button>            
    </body>
</html>

J'espère que cela vous aidera.