Ajouter une ligne de tableau en jQuery

Quelle est la meilleure méthode jQuery pour ajouter une ligne supplémentaire à une table dans la 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 à une table comme celle-ci (telles que les entrées, les sélections, le nombre de lignes)?

2109
demandé sur Mark Amery 0000-00-00 00:00:00

3 réponses

L'approche que vous proposez n'est pas garanti pour vous donner le résultat que vous recherchez, si vous aviez un tbody par exemple: 

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

vous finiriez avec le suivant: 

<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 n'importe quoi dans la méthode after() tant que C'est du HTML valide, y compris plusieurs lignes comme dans l'exemple surtout.

mise à Jour: "1519240920 de" Revisiter cette réponse suivant l'activité récente de cette question. eyelidless fait un bon commentaire qu'il y aura toujours un tbody dans le DOM; c'est vrai, mais seulement s'il y a au moins une rangée. Si vous n'avez pas de lignes, il n'y aura pas de tbody à moins que vous n'en ayez spécifié une vous-même.

DaRKoN_ suggère en ajoutant au tbody plutôt que ajouter du contenu après le dernier tr . Cela va autour de la question de n'avoir aucune rangée, mais n'est toujours pas pare-balles que vous pourriez théoriquement avoir plusieurs tbody éléments et la rangée serait ajoutée à chacun d'eux.

en soupesant tout, Je ne suis pas sûr qu'il y ait une solution unique qui tienne compte de chaque scénario possible. Vous devez vous assurer que le code jQuery correspond à votre marque.

je pense que le plus sûr la solution est probablement de s'assurer que votre table inclut toujours au moins un tbody dans votre balisage, même s'il n'y a 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 aussi tenir compte des multiples tbody éléments): 

$('#myTable > tbody:last-child').append('<tr>...</tr><tr>...</tr>');
1910
répondu Luke Bennett 2017-05-23 12:02:45

jQuery a une installation intégrée pour manipuler les éléments DOM à la volée.

vous pouvez ajouter n'importe quoi à votre table comme ceci: 

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

la chose $('<some-tag>') dans jQuery est un objet de balise qui peut avoir plusieurs attributs attr qui peuvent être définis et obtenir, ainsi que text , qui représente le texte entre la balise ici: <tag>text</tag> .

bizarre l'indentation, mais il est plus facile pour vous de voir ce qui se passe dans cet exemple.

709
répondu Neil 2012-02-29 22:36:49

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

jQuery depuis la version 1.4(?) détecte automatiquement si l'élément que vous essayez d'insérer (en utilisant l'un des append() , prepend() , before() , ou after() ) est un <tr> et l'insère dans le d'abord <tbody> dans votre table ou l'enveloppe dans un nouveau <tbody> si un n'existe pas.

donc oui votre exemple de code est acceptable et fonctionnera très bien avec jQuery 1.4+. ;) 

$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');
281
répondu Salman Abbas 2017-05-23 12:26:38