Comment ajouter un tableau en javascript

JavaScript est un langage de script côté client qui peut être intégré directement dans des pages Web via des documents HTML et exécuté sur les navigateurs Web. De nombreux effets interactifs sur les pages Web peuvent être obtenus grâce à JavaScript, notamment la génération dynamique de tableaux HTML. Comment utiliser JavaScript pour générer des tableaux HTML, l'une des méthodes sera présentée ci-dessous.

Étape 1 : Créer un conteneur de table

Pour générer un tableau HTML, vous devez d'abord créer un conteneur de table dans le document HTML pour stocker le tableau généré. En HTML, le conteneur de table peut être représenté par l'élément table, c'est-à-dire :

<table id="myTable"></table>

Dans le code ci-dessus, un attribut id est utilisé pour spécifier un identifiant unique pour le conteneur de table afin de faciliter la référence en JavaScript.

Étape 2 : Ajouter l'en-tête du tableau

L'en-tête du tableau comprend généralement les noms de colonnes du tableau, qui peuvent être ajoutés dynamiquement via JavaScript. Voici un exemple de code pour ajouter un en-tête de tableau :

var table = document.getElementById("myTable");
var thead = table.createTHead();
var row = thead.insertRow();
var cell1 = row.insertCell();
var cell2 = row.insertCell();
cell1.innerHTML = "<b>姓名</b>";
cell2.innerHTML = "<b>年龄</b>";

Dans le code ci-dessus, obtenez d'abord la référence au conteneur de table via la méthode getElementById, puis appelez la méthode createTHead pour créer l'en-tête de tableau, puis ajoutez une ligne de tableau. en-têtes via la méthode insertRow, et enfin Deux cellules ont été ajoutées via la méthode insertCell et le contenu textuel des cellules a été défini à l'aide de l'attribut innerHTML.

Étape 3 : Ajouter des données de table

Les données de table sont généralement obtenues à partir du serveur backend. Les données peuvent être obtenues de manière asynchrone via Ajax et d'autres méthodes, puis ajoutées dynamiquement à la table via JavaScript. Voici un exemple de code pour ajouter des données de tableau :

function loadData() {
  // 通过Ajax获取数据，然后解析成一个二维数组
  var data = [
    ["张三", 22],
    ["李四", 23],
    ["王五", 24],
    ...
  ];
  var table = document.getElementById("myTable");
  var tbody = table.createTBody();
  for (var i = 0; i < data.length; i++) {
    var row = tbody.insertRow();
    var cell1 = row.insertCell();
    var cell2 = row.insertCell();
    cell1.innerHTML = data[i][0];
    cell2.innerHTML = data[i][1];
  }
}

Dans le code ci-dessus, la fonction loadData obtient un tableau de données bidimensionnel via Ajax, puis parcourt le tableau via une boucle for, crée dynamiquement des lignes et des cellules de tableau et remplit les données dans la cellule.

Étape 4 : Appeler la fonction

Dans le document HTML, nous pouvons appeler la fonction loadData via des boutons ou d'autres méthodes interactives pour charger dynamiquement les données du tableau. Voici un exemple de code pour appeler une fonction :

<button onclick="loadData()">加载表格数据</button>

Après avoir cliqué sur le bouton, la fonction loadData sera appelée pour terminer le processus de génération dynamique d'un tableau HTML. Ce qui précède est un exemple d'utilisation de JavaScript pour ajouter dynamiquement un tableau HTML. Dans les applications réelles, le code peut être ajusté de manière flexible en fonction des besoins réels pour obtenir des effets de tableau plus complexes.

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!