Créer un tableau avec jQuery
- Créer une table avec jQuery en prenant le contenu de la table sous forme de chaîne
- Créer une table avec jQuery en créant une instance de table
Avec l’aide de la bibliothèque jQuery, nous pouvons ajouter de nouvelles lignes de tableau à notre contenu et créer l’élément table. Nous allons effectuer un travail de boucle de base pour nous assurer que nos données ou notre modèle de sortie sont empilés dans un format de tableau.
Nous examinerons deux exemples, l’un qui prendra les balises et le contenu de la table sous forme de chaîne. Plus tard, l’ajouter le configurera comme un tableau dans le corps HTML.
Cependant, la création d’éléments de table sous forme de chaînes peut entraver la personnalisation ultérieure. Ainsi, dans notre deuxième exemple, nous allons créer une instance d’un élément table, et ainsi en spécifiant les attributs (id, class), nous pouvons changer les propriétés du contenu de la table.
Faisons une vérification approfondie pour comprendre.
Créer une table avec jQuery en prenant le contenu de la table sous forme de chaîne
Ici, nous allons prendre une variable pour stocker la balise de début des éléments du tableau, ajouter le contenu et la balise de fin. Dans l’étape suivante, nous ajouterons cette somme ou cette collection de chaînes à la div que nous avons considérée.
Le problème de base serait que nous ne pouvons pas réinitialiser les propriétés des données de table ou des lignes de table. Vérifions les lignes de code.
Extrait de code:
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<div id="tab"> </div>
<script>
var content = "<table>"
for(i=0; i<3; i++){
content += '<tr><td>' + 'output ' + i + '</td></tr>';
}
content += "</table>"
$('#tab').append(content);
</script>
Production:
Créer une table avec jQuery en créant une instance de table
Nous allons envisager de créer l’instance d’une table avec ses attributs id et class. Plus tard, en fonction des préférences, nous pouvons modifier les propriétés.
Les clôtures de code décrivent cela plus explicitement.
Extrait de code:
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<div id="tab"> </div>
<script>
var table = $('<table>');
for(i=0; i<3; i++){
var row = $('<tr>').text('output ' + i).addClass('rows');
row.addClass('rows').css({'color':'red'});
table.append(row);
}
$('#tab').append(table);
</script>
Production:
