Dans le développement front-end, les tableaux sont l'un des éléments les plus courants. JavaScript peut être utilisé pour générer dynamiquement des tableaux, ce qui facilite notre contrôle et notre fonctionnement des tableaux. Voici quelques méthodes et techniques courantes pour vous aider à mieux rédiger des tableaux JavaScript.
Les tableaux sont composés de balises HTML
, | , ,
---|
td> ; à définir. Si vous souhaitez créer un tableau de manière dynamique, vous pouvez générer le tableau en ajoutant ces balises.
Ce qui suit est un exemple simple : <table id="myTable"> <thead> <tr> <th>Name</th> <th>Age</th> <th>City</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>25</td> <td>New York</td> </tr> <tr> <td>Jane</td> <td>30</td> <td>Los Angeles</td> </tr> </tbody> </table> Copier après la connexion Après avoir créé le formulaire, vous pouvez le modifier. Par exemple, vous pouvez ajouter de nouvelles lignes et colonnes : var table = document.getElementById("myTable"); var row = table.insertRow(2); var cell1 = row.insertCell(0); var cell2 = row.insertCell(1); var cell3 = row.insertCell(2); cell1.innerHTML = "Bob"; cell2.innerHTML = "40"; cell3.innerHTML = "Chicago"; Copier après la connexion Le code ci-dessus ajoute une nouvelle ligne au tableau et remplit les informations dans chaque cellule.
Dans le développement réel, nous devrons peut-être générer dynamiquement des tableaux basés sur certaines données. Supposons que nous ayons un tableau JSON contenant des informations sur les étudiants, nous pouvons alors générer dynamiquement une table en parcourant le tableau. Ce qui suit est un exemple : var students = [ {name: "John", age: 25, city: "New York"}, {name: "Jane", age: 30, city: "Los Angeles"}, {name: "Bob", age: 40, city: "Chicago"} ]; var table = document.createElement("table"); var thead = document.createElement("thead"); var tbody = document.createElement("tbody"); var tr = document.createElement("tr"); for (var key in students[0]) { var th = document.createElement("th"); th.innerHTML = key.charAt(0).toUpperCase() + key.slice(1); tr.appendChild(th); } thead.appendChild(tr); table.appendChild(thead); for (var i = 0; i < students.length; i++) { var tr = document.createElement("tr"); for (var key in students[i]) { var td = document.createElement("td"); td.innerHTML = students[i][key]; tr.appendChild(td); } tbody.appendChild(tr); } table.appendChild(tbody); document.body.appendChild(table); Copier après la connexion Le code ci-dessus crée d'abord un élément DOM contenant un tableau, puis crée respectivement l'en-tête et le corps du tableau. Au cours du processus de parcours du tableau JSON, les éléments sont ajoutés ligne par ligne en fonction du format de l'en-tête et du corps du tableau. Il est à noter que la partie grasse du code est utilisée pour mettre en majuscule la première lettre de chaque clé.
Le tri des tables est l'une des opérations les plus courantes. Le tri des tableaux peut être réalisé via JavaScript. Ce qui suit est un exemple : function sortTable(n) { var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0; table = document.getElementById("myTable"); switching = true; dir = "asc"; while (switching) { switching = false; rows = table.rows; for (i = 1; i < (rows.length - 1); i++) { shouldSwitch = false; x = rows[i].getElementsByTagName("td")[n]; y = rows[i + 1].getElementsByTagName("td")[n]; if (dir == "asc") { if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) { shouldSwitch = true; break; } } else if (dir == "desc") { if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) { shouldSwitch = true; break; } } } if (shouldSwitch) { rows[i].parentNode.insertBefore(rows[i + 1], rows[i]); switching = true; switchcount ++; } else { if (switchcount == 0 && dir == "asc") { dir = "desc"; switching = true; } } } } Copier après la connexion Le code ci-dessus implémente une fonction qui trie selon une certaine colonne du tableau. Le paramètre n transmis représente le nombre de colonnes à trier.
Le filtrage de table est également une opération courante. Les données du tableau peuvent être filtrées via JavaScript. Ce qui suit est un exemple : function filterTable() { var input, filter, table, tr, td, i, txtValue; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); table = document.getElementById("myTable"); tr = table.getElementsByTagName("tr"); for (i = 0; i < tr.length; i++) { td = tr[i].getElementsByTagName("td")[0]; if (td) { txtValue = td.textContent || td.innerText; if (txtValue.toUpperCase().indexOf(filter) > -1) { tr[i].style.display = ""; } else { tr[i].style.display = "none"; } } } } Copier après la connexion Le code ci-dessus implémente une fonction qui filtre les données du tableau en fonction de la valeur dans la zone de saisie. En obtenant la valeur dans la zone de saisie de l'utilisateur, puis en parcourant le contenu de chaque cellule du tableau, si le contenu contient la valeur saisie par l'utilisateur, la ligne de données est conservée, sinon elle est masquée. Pour résumer, voici quelques codes JavaScript couramment utilisés pour vous aider à contrôler et à utiliser les tables plus facilement. Bien sûr, dans le développement réel, il existe davantage de techniques et de méthodes, et j'espère que vous pourrez les explorer et les essayer davantage. Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois! source:php.cn
Article précédent:javascript ne peut s'exécuter que dans le navigateur
Article suivant:javascript imprime la division et le reste
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Comment afficher la version mobile de Google Chrome
Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?
Depuis 2024-04-23 00:22:19
0
11
2229
Il n'y a aucune sortie dans la fenêtre parent
document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...
Depuis 2024-04-18 23:52:34
0
1
1756
Où sont les didacticiels sur la cartographie mentale CSS ?
Didacticiel
Depuis 2024-04-16 10:10:18
0
0
1788
Rubriques connexes
Plus>
|