Comment ajouter des lignes au tableau à l'aide du DOM JavaScript ?-tutoriel HTML-php.cn

Comment ajouter des lignes au tableau à l'aide du DOM JavaScript ?

PHPz

Libérer： 2023-09-16 17:57:07

avant

1248 Les gens l'ont consulté

如何使用JavaScript DOM向表格添加行？

Nous apprendrons comment ajouter une ligne à un tableau en utilisant JavaScript dom. Pour atteindre cet objectif, nous disposons de plusieurs méthodes. Certains d'entre eux sont les suivants :

Utilisez la méthode insertRow()
En créant de nouveaux éléments

Utilisez la méthode insertRow()

Utilisez la méthode insertRow() pour insérer une nouvelle ligne au début du tableau. Il crée un nouvel élément et l'insère dans le tableau. Il accepte un nombre en paramètre, précisant la position du tableau. Si nous ne transmettons aucun paramètre, les lignes sont insérées au début du tableau. Si vous souhaitez insérer des lignes en fin de tableau, passez -1 en paramètre.

Grammaire

table.insertRow(index)

Copier après la connexion

Valeur de retour - L'élément inséré.

Comme nous le savons, un tableau approprié comporte non seulement des lignes de tableau (), mais également des documents de tableau appelés cellules de tableau (). Pour insérer une cellule dans une ligne, nous utilisons la méthode insertCell(). Il crée un élément dans la ligne du tableau. Il accepte un nombre comme argument, spécifiant l'index de la cellule dans la ligne.

Grammaire

Voici la syntaxe pour insérer des cellules :

table.insertCell(index)

Copier après la connexion

Valeur de retour - L'élément inséré.

Étapes pour ajouter une ligne à un tableau

Obtenez les éléments du tableau de données.
Utilisez la méthode insertRow pour créer une ligne et l'insérer dans le tableau.
Utilisez la méthode insertCell pour créer une nouvelle cellule et insérez-la dans la ligne que vous avez créée.
Ajoutez des données aux cellules nouvellement créées.

Exemple

se traduit par :

Exemple

Dans cet exemple, nous avons un tableau contenant les noms des élèves et leur âge. Nous ajouterons un nouvel élève au bout du tableau.

<!DOCTYPE html>
<html>
<head>
   <title> Example- add rows to a table using JavaScript DOM </title>
   <style>
      table,
      td,
      th {
         border: 1px solid black;
      }
   </style>
</head>
<body>
   <h2> Adding rows to a table using JavaScript DOM </h2>
   <p> Click on the button to add the row to the table </p>
   <button id="btn" onclick="addRow()"> Click me </button>
   <br><br>
   <table id="myTable">
      <thead>
         <th> Name </th>
         <th> Age </th>
         <th> City </th>
      </thead>
      <tbody>
         <tr>
            <td> Alex </td>
            <td> 20 </td>
            <td> New York </td>
         </tr>
         <tr>
            <td> Tim </td>
            <td> 18 </td>
            <td> Boston </td>
         </tr>
         <tr>
            <td> Mark </td>
            <td> 23 </td>
            <td> San Diego </td>
         </tr>
      </tbody>
   </table>
</body>
<script>
   function addRow() {
      // Get the table element in which you want to add row
      let table = document.getElementById("myTable");
   
      // Create a row using the inserRow() method and
      // specify the index where you want to add the row
      let row = table.insertRow(-1); // We are adding at the end
   
      // Create table cells
      let c1 = row.insertCell(0);
      let c2 = row.insertCell(1);
      let c3 = row.insertCell(2);
   
      // Add data to c1 and c2
      c1.innerText = "Elon"
      c2.innerText = 45
      c3.innerText = "Houston"
   }
</script>
</html>

Copier après la connexion

En créant de nouveaux éléments

Dans cette méthode, nous allons créer de nouvelles lignes et colonnes à l'aide de la méthode document.createElement().

Méthode

Voici les étapes pour ajouter des lignes à un tableau en créant des éléments.

Obtenez l'élément de corps de table pour ajouter la ligne
Créer des éléments de ligne
Créez des cellules et insérez des données dans des cellules
Ajouter des cellules aux lignes
Ajouter des lignes au corps du tableau

Exemple

se traduit par :

Exemple

<html>
<head>
   <title> Example- add rows to a table using JavaScript DOM </title>
   <style>
      table,
      td,
      th {
         border: 1px solid black;
      }
   </style>
</head>

<body>
   <h2> Adding rows to a table using JavaScript DOM </h2>
   <p>Click on the button to add the row to the table </p>
   <button id="btn" onclick="addRow()"> Click me </button>
   <br><br>
   <table id="myTable">
      <thead>
         <th> Name </th>
         <th> Age </th>
         <th> City </th>
         <th> Course </th>
      </thead>
      <tbody id="tableBody">
         <tr>
            <td> Alex </td>
            <td> 20 </td>
            <td> New York </td>
            <td> Java </td>
         </tr>
         <tr>
            <td> Tim </td>
            <td> 18 </td>
            <td> Boston </td>
            <td> Python </td>
         </tr>
         <tr>
            <td> Mark </td>
            <td> 23 </td>
            <td> San Diego </td>
            <td> JavaScript </td>
         </tr>
      </tbody>
   </table>
</body>
<script>
   function addRow() {
      // Get the table body element in which you want to add row
      let table = document.getElementById("tableBody");
   
      // Create row element
      let row = document.createElement("tr")
      
      // Create cells
      let c1 = document.createElement("td")
      let c2 = document.createElement("td")
      let c3 = document.createElement("td")
      let c4 = document.createElement("td")
      
      // Insert data to cells
      c1.innerText = "Elon"
      c2.innerText = "42"
      c3.innerText = "Houston"
      c4.innerText = "C++"
      
      // Append cells to row
      row.appendChild(c1);
      row.appendChild(c2);
      row.appendChild(c3);
      row.appendChild(c4);
      
      // Append row to table body
      table.appendChild(row)
   }
</script>
</html>

Copier après la connexion

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!