communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > Questions et réponses frontales > Comment écrire un tableau en javascript

Comment écrire un tableau en javascript

WBOY
Libérer： 2023-05-12 20:09:35
original
2014 Les gens l'ont consulté

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.

  1. Création et modification de tableaux de base

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.

  1. Générer des tableaux basés sur des données

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é.

  1. Tri des tables

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.

  1. Filtrage de table

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
function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...
Depuis 2024-04-29 11:01:01
0
3
2041
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
2200
La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...
Depuis 2024-04-19 15:37:47
0
1
1855
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
1745
Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel
Depuis 2024-04-16 10:10:18
0
0
1766
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal