Comment écrire un tableau en javascript

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 f5d188ed2c074f8b944552db028f98a1, b4d429308760b6c2d20d6300079ed38e, 92cee25da80fac49f6fb6eec5fd2c22a, 06669983c3badb677f993a8c29d18845, a34de1251f0d9fe1e645927f19a896e8, b4d429308760b6c2d20d6300079ed38e 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>

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";

Le code ci-dessus ajoute une nouvelle ligne au tableau et remplit les informations dans chaque cellule.

2. 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);

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

3. 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;
      }
    }
  }
}

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.

4. 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";
      }
    }
  }
}

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!