Question Ajouter une ligne de tableau dans jQuery


Quelle est la meilleure méthode dans jQuery pour ajouter une ligne supplémentaire à une table comme la dernière rangée?

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 (comme les entrées, les sélections, le nombre de lignes)?


2050
2017-10-04 21:33


origine


Réponses:


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

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

Vous vous retrouveriez avec ce qui suit:

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

Je recommanderais donc cette approche à la place:

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

Vous pouvez inclure n'importe quoi dans le after() méthode aussi longtemps que c'est HTML valide, y compris plusieurs lignes selon l'exemple ci-dessus.

Mettre à jour: Revisiter cette réponse suite à une activité récente avec cette question. l'absence de paupières fait un bon commentaire qu'il y aura toujours un tbody dans les DOM; c'est vrai, mais seulement s'il y a au moins une ligne. Si vous n'avez pas de ligne, il n'y aura pas tbody sauf si vous en avez spécifié un vous-même.

DaRKoN_ suggère annexant à la tbody plutôt que d'ajouter du contenu après la dernière tr. Cela contourne la question de ne pas avoir de lignes, mais n'est toujours pas à l'épreuve des balles car vous pourriez théoriquement avoir plusieurs tbody les éléments et la rangée seraient ajoutés à chacun d'eux.

En pesant le tout, je ne suis pas sûr qu'il existe une seule solution unifiée qui tient 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 d'assurer votre table comprend toujours au moins un tbody dans votre balisage, même s'il n'a pas de lignes. Sur cette base, vous pouvez utiliser ce qui suit qui fonctionnera cependant de nombreuses lignes que vous avez (et aussi compte pour plusieurs tbody éléments):

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

1863
2017-10-04 21:49



jQuery dispose d'une fonction intégrée pour manipuler les éléments DOM à la volée.

Vous pouvez ajouter quelque chose à votre table comme ceci:

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

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

C'est un retrait assez bizarre, mais il est plus facile pour vous de voir ce qui se passe dans cet exemple.


697
2017-08-14 15:30



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

jQuery puisque 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() méthodes) est un <tr> et l'insère dans le premier <tbody> dans votre table ou l'enveloppe dans un nouveau <tbody> si l'un n'existe pas.

Alors oui votre code d'exemple est acceptable et fonctionnera bien avec jQuery 1.4+. ;)

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

274
2018-06-05 20:12



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

Tel que:

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

Ensuite, il insère votre nouvelle rangée dans le pied de page - pas au corps.

D'où la meilleure solution consiste à inclure un <tbody> tag et utilisation .append, plutôt que .after.

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

147
2018-01-22 06:47



Je sais que vous avez demandé une méthode jQuery. J'ai beaucoup regardé et je trouve que nous pouvons le faire mieux que d'utiliser JavaScript directement avec la fonction suivante.

tableObject.insertRow(index)

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

Ce paramètre est requis dans Firefox et Opéra, mais il est facultatif 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.

Cela fonctionnera pour toutes les structures acceptables de la table HTML.

L'exemple suivant va insérer une ligne dans last (-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 ça aide.


48
2018-04-20 17:38



je recommande

$('#myTable > tbody:first').append('<tr>...</tr><tr>...</tr>'); 

par opposition à

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

le first et last Les mots-clés fonctionnent sur le premier ou le dernier tag à démarrer, pas fermé. Par conséquent, cela fonctionne mieux avec les tables imbriquées, si vous ne souhaitez pas que la table imbriquée soit modifiée, mais qu'elle soit ajoutée à la table globale. Au moins, c'est ce que j'ai trouvé.

<table id=myTable>
  <tbody id=first>
    <tr><td>
      <table id=myNestedTable>
        <tbody id=last>
        </tbody>
      </table>
    </td></tr>
  </tbody>
</table>

31
2017-10-22 21:34



À mon avis, la manière la plus rapide et la plus claire

//Try to get tbody first with jquery children. works faster!
var tbody = $('#myTable').children('tbody');

//Then if no tbody just select your table 
var table = tbody.length ? tbody : $('#myTable');

//Add row
table.append('<tr><td>hello></td></tr>');

voici une démo Violon

Aussi je peux recommander une petite fonction pour faire plus de changements html

//Compose template string
String.prototype.compose = (function (){
var re = /\{{(.+?)\}}/g;
return function (o){
        return this.replace(re, function (_, k){
            return typeof o[k] != 'undefined' ? o[k] : '';
        });
    }
}());

Si vous utilisez mon compositeur de cordes, vous pouvez le faire comme

var tbody = $('#myTable').children('tbody');
var table = tbody.length ? tbody : $('#myTable');
var row = '<tr>'+
    '<td>{{id}}</td>'+
    '<td>{{name}}</td>'+
    '<td>{{phone}}</td>'+
'</tr>';


//Add row
table.append(row.compose({
    'id': 3,
    'name': 'Lee',
    'phone': '123 456 789'
}));

Voici une démo Violon


26
2018-06-30 12:40



Cela peut être fait facilement en utilisant la fonction "last ()" de jQuery.

$("#tableId").last().append("<tr><td>New row</td></tr>");

21
2018-01-26 13:34



J'utilise de cette façon quand il n'y a pas de ligne dans la table, et chaque rangée est assez compliquée.

style.css:

...
#templateRow {
  display:none;
}
...

xxx.html

...
<tr id="templateRow"> ... </tr>
...

$("#templateRow").clone().removeAttr("id").appendTo( $("#templateRow").parent() );

...

16
2017-12-16 05:30