Comment imprimer un tableau en Javascript

JavaScript, en tant que langage de script exécuté directement dans le navigateur, peut générer, insérer et modifier dynamiquement du contenu dans les pages HTML. Les tableaux sont l'un des moyens courants d'afficher des données dans les pages Web, et la puissante capacité de JavaScript à manipuler le DOM nous permet de générer et d'exploiter dynamiquement des tableaux dans des pages HTML. Cet article explique comment créer un tableau en JavaScript.

Structure de base des tableaux HTML

Avant de présenter comment utiliser JavaScript pour créer des tableaux, passons d'abord en revue la structure de base des tableaux HTML.

Les tableaux HTML se composent généralement de trois éléments : table, tr et td. Parmi eux, table (table) est un tout, utilisé pour contenir l'intégralité du tableau, tr (ligne) représente une ligne du tableau et td (cellule) représente une cellule du tableau.

Voici un exemple simple de tableau HTML :

<table>
  <tr>
    <td>姓名</td>
    <td>年龄</td>
    <td>性别</td>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td>男</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
    <td>女</td>
  </tr>
</table>

Générer dynamiquement des tableaux à l'aide de JavaScript

En JavaScript, nous pouvons générer dynamiquement des tableaux en créant des éléments de tableau, de ligne et de cellule et en les ajoutant au document.

Créer un tableau

Nous pouvons utiliser la méthode document.createElement() pour créer un objet élément de tableau :

var table = document.createElement('table');

Créer des lignes et des cellules

Utilisez la méthode table.insertRow() pour créer un nouvel objet ligne dans le tableau , utilisez row La méthode .insertCell() crée des objets de cellule en lignes.

Ce qui suit est un exemple de création dynamique d'un tableau, qui utilise JavaScript pour générer un tableau avec 3 lignes et 3 colonnes :

var table = document.createElement('table');
for (var i = 0; i < 3; i++) {
  var row = table.insertRow();
  for (var j = 0; j < 3; j++) {
    var cell = row.insertCell();
    cell.innerHTML = i + "," + j;
  }
}
document.body.appendChild(table);

Dans le code ci-dessus, nous créons d'abord un objet élément de table et créons un tableau avec 3 lignes et 3 colonnes à travers une feuille de boucle. Dans chaque boucle, nous créons un nouvel objet ligne à l'aide de la méthode insertRow(), créons un nouvel objet cellule à l'aide de la méthode insertCell() et ajoutons l'objet cellule à la ligne. Ensuite, nous remplissons chaque cellule avec des données via l'attribut innerHTML, et enfin ajoutons le tableau entier au document.

Modifier le style du tableau

Nous pouvons utiliser l'attribut element.style et l'attribut style CSS pour modifier le style du tableau.

Ce qui suit est un exemple de modification du style de tableau, qui utilise JavaScript pour générer dynamiquement un tableau avec une couleur d'arrière-plan et une bordure :

var table = document.createElement('table');
table.style.backgroundColor = '#eee';
table.style.border = '1px solid #000';

for (var i = 0; i < 3; i++) {
  var row = table.insertRow();
  for (var j = 0; j < 3; j++) {
    var cell = row.insertCell();
    cell.innerHTML = i + "," + j;
    cell.style.border = '1px solid #000';
    cell.style.padding = '10px';
  }
}
document.body.appendChild(table);

Dans le code ci-dessus, nous utilisons les propriétés table.style.backgroundColor et table.style.border pour définir la couleur d’arrière-plan et le style de bordure du tableau. Ensuite, nous définissons également des bordures et un remplissage sur chaque cellule pour la rendre plus jolie.

Résumé

Les tableaux sont l'un des éléments d'interface utilisateur courants dans les applications Web. Nous pouvons utiliser JavaScript pour générer et manipuler dynamiquement des tableaux. Dans cet article, nous avons expliqué comment créer, modifier et manipuler des tables à l'aide de JavaScript. J'espère que cet article vous a aidé à mieux comprendre les tableaux JavaScript et HTML.

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!