Maison >interface Web >js tutoriel >Comment insérer dynamiquement un identifiant dans un élément de tableau en utilisant JavaScript ?

Comment insérer dynamiquement un identifiant dans un élément de tableau en utilisant JavaScript ?

王林avant: 2023-08-24 23:57:021125parcourir

如何使用 JavaScript 动态地将 id 插入到表元素中？

Dans cet article, nous apprendrons comment insérer dynamiquement un ID dans un élément de table à l'aide de JavaScript à l'aide de l'API setAttribute.

Dans le développement Web, l'insertion dynamique d'identifiants dans des éléments de tableau HTML peut être une technique utile lorsque nous devons identifier et manipuler de manière unique une ligne ou une cellule spécifique. En attribuant par programme des ID aux éléments du tableau, nous obtenons plus de contrôle et de flexibilité dans l'accès et la modification du contenu du tableau.

Passons en revue quelques exemples pour comprendre comment y parvenir.

Exemple 1

Dans cet exemple, nous générons des identifiants aléatoires pour les lignes du tableau en comptant le nombre total de lignes disponibles et en ajoutant ce nombre à une chaîne vide.

Nom du fichier : index.html

<html lang="en">
   <head>
      <title>How to dynamically insert id into table element using JavaScript?</title>
   </head>
   <body>
      <h3>How to dynamically insert id into table element using JavaScript?</h3>
      <table id="myTable">
         <tr>
            <th>Row</th>
            <th>Data</th>
         </tr>
      </table>
      <button onclick="addRow()">Add Row</button>
      <script>
         function addRow() {
            const table = document.getElementById("myTable");
            const row = table.insertRow();
            const rowId = "" + (table.rows.length - 1); // Generate a unique ID
            row.id = rowId; // Set the ID of the row

            // Add cells to the new row
            const cell1 = row.insertCell(0);
            const cell2 = row.insertCell(1);

            // Insert content into cells
            cell1.innerHTML = "Row " + (table.rows.length - 1);
            cell2.innerHTML = "Data " + (table.rows.length - 1);
         }
      </script>
   </body>
</html>

Exemple 2

Dans cet exemple, nous suivrons le modèle de code ci-dessus et générerons des identifiants aléatoires pour les cellules du tableau en utilisant 3 méthodes différentes à l'aide de la méthode classList, de l'objet classList et de la propriété id de l'objet ensemble de données.

Nom du fichier : index.html

<html lang="en">
   <head>
      <title>
         How to dynamically insert id into table element using JavaScript?
      </title>
   </head>
   <body>
      <h3>How to dynamically insert id into table element using JavaScript?</h3>
      <table id="myTable">
         <tr>
            <th>Row</th>
            <th>Data</th>
         </tr>
      </table>
      <button onclick="addRowUsingObj()">Add Row Using classList object</button>
      <button onclick="addRowUsingMethod()">
         Add Row Using classList method
      </button>
      <button onclick="addRowUsingId()">Add Row Using the id property</button>
      <script>
         const table = document.getElementById("myTable");

         function addRowUsingObj() {
            // Example 1: Using classList object
            const row1 = table.insertRow();
            row1.classList.add("custom-row");

            // Insert content into cells
            const cell1 = row1.insertCell();
            const cell2 = row1.insertCell();
            cell1.innerHTML = "Row " + (table.rows.length - 1);
            cell2.innerHTML = "Data " + (table.rows.length - 1);
         }
 
         function addRowUsingMethod() {
            // Example 2: Using classList method
            const row3 = table.insertRow();
            row3.classList.add("row-highlight");

            // Insert content into cells
            const cell1 = row3.insertCell();
            const cell2 = row3.insertCell();
            cell1.innerHTML = "Row " + (table.rows.length - 1);
            cell2.innerHTML = "Data " + (table.rows.length - 1);
         }

         function addRowUsingId() {
            // Example 3: Using the id property of the dataset object
            const row4 = table.insertRow();
            const rowId = "row-" + (table.rows.length - 1); // Generate a unique ID
            row4.dataset.id = rowId; // Set the ID of the row

            // Insert content into cells
            const cell1 = row4.insertCell();
            const cell2 = row4.insertCell();
            cell1.innerHTML = "Row " + (table.rows.length - 1);
            cell2.innerHTML = "Data " + (table.rows.length - 1);
            // Add more cells and content for the other examples if needed
         }
      </script>
   </body>
</html>

Conclusion

En résumé, l'utilisation de JavaScript pour insérer dynamiquement des identifiants dans les éléments du tableau permet une manipulation et une interaction efficaces avec des éléments spécifiques du tableau. Dans l'exemple fourni, nous avons appris à insérer dynamiquement des identifiants dans les lignes et les cellules du tableau. En tirant parti des méthodes JavaScript telles que insertRow, insertCell, etc. et en manipulant l'attribut id, nous générons des identifiants uniques et les associons aux éléments de table correspondants.

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!

JavaScript html 字符串对象

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment définir l'opacité d'une image à l'aide de FabricJS ?Article suivant：Comment définir l'opacité d'une image à l'aide de FabricJS ?

Articles Liés

Voir plus