web-dev-qa-db-fra.com

Ajouter des lignes au tbody d'une table en utilisant jQuery

J'essaie d'ajouter des lignes à la tbody d'une table. Mais j'ai du mal à y parvenir. Premièrement, la fonction où tout se passe est appelée lors du changement d'une liste déroulante à partir d'une page HTML. J'ai créé une chaîne tr contenant tous les td à l'intérieur de celle contenant les éléments html, le texte et d'autres éléments. Mais quand j'essaie d'ajouter cette ligne générée à la table en utilisant:

$(newRowContent).appendTo("#tblEntAttributes tbody");

Je rencontre une erreur. Le nom de la table est tblEntAttributes et j'essaie de l'ajouter à la tbody.

En réalité, jQuery est incapable d’obtenir tblEntAttributes en tant qu’élément html. Mais je peux y accéder en utilisant documemt.getElementById("tblEntAttributes"); 

Pourrais-je y parvenir en ajoutant des lignes à la tbody de la table. Peut-être un contournement ou quelque chose.

Voici le code complet:

var newRowContent = "<tr><td><input type=\"checkbox\" id=\"" + chkboxId + "\" value=\"" + chkboxValue + "\"></td><td>" + displayName + "</td><td>" + logicalName + "</td><td>" + dataType + "</td><td><input type=\"checkbox\" id=\"chkAllPrimaryAttrs\" name=\"chkAllPrimaryAttrs\" value=\"chkAllPrimaryAttrs\"></td><td><input type=\"checkbox\" id=\"chkAllPrimaryAttrs\" name=\"chkAllPrimaryAttrs\" value=\"chkAllPrimaryAttrs\"></td></tr>";

$("#tblEntAttributes tbody").append(newRowContent);

Une chose que j'ai oublié de mentionner est la fonction dans laquelle ce code est écrit est en fait la fonction de rappel de réussite pour un appel ajax. Je peux accéder à la table en utilisant document.getElementById("tblEntAttributes"), mais pour une raison quelconque, $(#tblEntAttributes) ne semble pas fonctionner.

jquerydynamichtml-tablerows
60
Anupam

Je n'ai jamais rencontré un problème aussi étrange comme celui-ci! o.O

Savez-vous quel était le problème? $ ne fonctionne pas. J'ai essayé le même code avec jQuery comme jQuery("#tblEntAttributes tbody").append(newRowContent); et cela fonctionne comme un charme! 

Aucune idée pourquoi ce problème étrange se produit!

13
Anupam

("#tblEntAttributes tbody") 

doit être 

$("#tblEntAttributes tbody"). 

Vous ne sélectionnez pas l'élément avec la syntaxe correcte

Voici un exemple des deux 

$(newRowContent).appendTo($("#tblEntAttributes"));

et

$("#tblEntAttributes tbody").append(newRowContent);

working http://jsfiddle.net/xW4NZ/

81
ᾠῗᵲᄐᶌ

utilisez ceci

$("#tblEntAttributes tbody").append(newRowContent);
34
user3962745

Comme @wirey a dit appendTo devrait fonctionner, sinon vous pouvez essayer ceci:

$("#tblEntAttributes tbody").append(newRowContent);
3
thecodeparadox

Voici une version appendTo utilisant le menu déroulant HTML que vous avez mentionné. Il insère une autre ligne sur "changer".

$('#dropdown').on( 'change', function(e) {
    $('#table').append('<tr><td>COL1</td><td>COL2</td></tr>');
});

Avec un exemple pour vous de jouer avec. Bonne chance!

http://jsfiddle.net/xtHaF/12/

3
Andrew

Avec Lodash, vous pouvez créer un modèle et procéder comme suit:

    <div class="container">
        <div class="row justify-content-center">
            <div class="col-12">
                <table id="tblEntAttributes" class="table">
                    <tbody>
                        <tr>
                            <td>
                                chkboxId
                            </td>
                            <td>
                               chkboxValue
                            </td>
                            <td>
                                displayName
                            </td>
                            <td>
                               logicalName
                            </td>
                            <td>
                                dataType
                            </td>
                        </tr>
                    </tbody>
                </table>
                <button class="btn btn-primary" id="test">appendTo</button>
            </div>
        </div>
     </div>

Et voici le javascript:

        var count = 1;
        window.addEventListener('load', function () {
            var compiledRow = _.template("<tr><td><input type=\"checkbox\" id=\"<%= chkboxId %>\" value=\"<%= chkboxValue %>\"></td><td><%= displayName %></td><td><%= logicalName %></td><td><%= dataType %></td><td><input type=\"checkbox\" id=\"chkAllPrimaryAttrs\" name=\"chkAllPrimaryAttrs\" value=\"chkAllPrimaryAttrs\"></td><td><input type=\"checkbox\" id=\"chkAllPrimaryAttrs\" name=\"chkAllPrimaryAttrs\" value=\"chkAllPrimaryAttrs\"></td></tr>");
            document.getElementById('test').addEventListener('click', function (e) {
                var ajaxData = { 'chkboxId': 'chkboxId-' + count, 'chkboxValue': 'chkboxValue-' + count, 'displayName': 'displayName-' + count, 'logicalName': 'logicalName-' + count, 'dataType': 'dataType-' + count };
                var tableRowData = compiledRow(ajaxData);
                $("#tblEntAttributes tbody").append(tableRowData);
                count++;
            });
        });

La voici dans jsbin

0
asmmahmud