Je veux créer une table dynamique dans JSP. Les données qui doivent être entrées dans le tableau sont en cours de former une matrice.
document.getElementById('tableDiv').innerHTML = "
<table><tr>"+
"<th> Exception Id </th> <th> Type </th> </tr>"+
"<script> logic to iterate array and create multiple rows and column
<tr>... <td>...</td></tr></script>
"</table>";
3 Réponses :
Vous pouvez utiliser en utilisant Un foreach avec votre tableau et votre modèle vous pouvez ajouter des nœuds enfants dans le Todbon de votre table. Dans le lien ci-dessous, expliquez mieux qui utiliser des modèles. une nouvelle étiquette dans HTML5. de
Je ne connais pas la structure de vos lignes, mais il vous suffit d'écrire votre code HTML des lignes dans le modèle et d'ajouter des noms ou des classes pour que les cellules utilisent dans un
OK Vous avez des objets d'objets, vous souhaitez afficher les données dans la table à droite. Ensuite, suivez le code ci-dessous.
dans la page JSP écrire une table vide avec l'en-tête. P>
var text = ""
var i;
for (i = 0; i < array.length; i++) {
text += <tr><td>array[ i ]</td></tr>;
}
$('#tableID').find('tbody').html(text); // Jquery
Fondamentalement, vous et moi faisons la même chose. Vous venez de prendre une variable supplémentaire puis de l'ajouter par innerhtml. Je voulais une alternative ou une solution qui pourrait supprimer le code de script de ma chaîne innerhtml.
Ensuite, utilisez le concept de jeu de données. Cela donne aussi beaucoup d'avenir.
Pour cela, je dois d'abord créer une table.
La nouvelle modification semble être optimisée, laissez-moi essayer cela, vous mettra à jour bientôt.
@Ayush il n'est pas optimisé. Il n'est pas syntaxiquement correct pour un début et même s'il s'agissait, il fait une concaténation à la chaîne que peut-être raccourcit la quantité de code que vous écrivez mais sera probablement mal performamment avec de grands ensembles de données en raison des frais généraux de la création de lots. des cordes. Autre que cela, il aura le même profil que toute autre solution innerhtml, car elle nécessite toujours une analyse de chaîne dans DOM.
Vous pouvez éviter la nécessité de générer HTML dans une chaîne puis de l'ajouter manuellement à la page en manipulant le HTMLTableElement directement via JavaScript.
HTMLTableElement # Insertrow () Code> Vous ajoutez une nouvelle HTMLTablerowelement A > li>
HTMLTablerowelement # InsertCell code> ajoute une nouvelle HTMLCellElement LI>
TextContent code> ou CreateTextNode code> et APPENDCORD CODE> a> Pour définir le contenu des cellules. Les résultats sont les mêmes - les deux sont des options. LI>
ol> p>
<div id="tableDiv"></div>
Oui, voir HTMLTableElement .
@Teemu, merci. Pouvez-vous s'il vous plaît me référer un exemple de code pour passer à travers?
Il y a beaucoup d'exemples à MDN, lorsque vous creusez au fond de la création des éléments de la table.
C'est très facile dans JQuery. Prenez d'abord une variable et appendez le code HTML. et attribuer cette variable dans l'ID CSS. Si vous voulez exemple, dis-moi que je vais envoyer comme réponse
@ user3678149, ce sera génial si vous pouvez m'aider avec l'exemple.
J'ai donné la réponse ci-dessous. Vérifiez s'il vous plaît