Maison > Article > interface Web > Comment ajouter des lignes au tableau à l'aide du DOM JavaScript ?
Comment ajouter des lignes au tableau à l'aide du DOM JavaScript ?
- PHPzavant
- 2023-09-16 17:57:071179parcourir
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 a34de1251f0d9fe1e645927f19a896e8 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)
Valeur de retour - L'élément inséré.
Comme nous le savons, un tableau approprié comporte non seulement des lignes de tableau (a34de1251f0d9fe1e645927f19a896e8), mais également des documents de tableau appelés cellules de tableau (b6c5a531a458a2e790c1fd6421739d1c). Pour insérer une cellule dans une ligne, nous utilisons la méthode insertCell(). Il crée un élément b6c5a531a458a2e790c1fd6421739d1c 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)
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>
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>
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!