Ajout de lignes à tbody d’une table à l’aide de jQuery

J’essaie d’append des lignes au tbody d’une table. Mais j’ai des problèmes pour y parvenir. Tout d’abord, la fonction où tout se passe est appelée sur changement d’une liste déroulante depuis une page HTML. J’ai créé une chaîne contenant tout le td qui contient les éléments HTML, le texte et d’autres éléments. Mais quand j’essaie d’append cette ligne générée à la table en utilisant:

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

Je rencontre une erreur. Le nom de la table est tblEntAtsortingbutes et j’essaie de l’append au tbody .

En fait, jQuery ne parvient pas à obtenir tblEntAtsortingbutes comme un élément HTML. Mais je peux y accéder en utilisant documemt.getElementById("tblEntAtsortingbutes");

Est-il possible d’y parvenir en ajoutant des lignes au tbody de la table? Peut-être un contournement ou quelque chose.

Voici le code complet:

 var newRowContent = "" + displayName + "" + logicalName + "" + dataType + ""; $("#tblEntAtsortingbutes tbody").append(newRowContent);

Une chose que j’ai oublié de mentionner est que la fonction où ce code est écrit est en fait la fonction de rappel de succès pour un appel ajax. Je suis capable d’accéder à la table en utilisant document.getElementById("tblEntAtsortingbutes") mais pour une raison quelconque, $(#tblEntAtsortingbutes) ne semble pas fonctionner.

("#tblEntAtsortingbutes tbody")

doit être

($("#tblEntAtsortingbutes tbody")) .

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

Voici un exemple des deux

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

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

travailler http://jsfiddle.net/xW4NZ/

utilisez ceci

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

Je n’ai jamais rencontré un problème aussi étrange comme celui-ci! oO

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

Aucune idée de la raison de ce problème étrange!

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

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

Voici une version annexe 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('COL1COL2'); });

Avec un exemple avec lequel vous pouvez jouer. Bonne chance!

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

Avec Lodash, vous pouvez créer un modèle et vous pouvez le faire de la manière suivante:

         chkboxId   chkboxValue   displayName   logicalName   dataType

Et voici le javascript:

  var count = 1; window.addEventListener('load', function () { var comstackdRow = _.template("\" value=\"<%= chkboxValue %>\"><%= displayName %><%= logicalName %><%= dataType %>"); 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 = comstackdRow(ajaxData); $("#tblEntAtsortingbutes tbody").append(tableRowData); count++; }); });

Ici c’est dans jsbin