Maison >interface Web >tutoriel HTML >Comment obtenir le innerHTML d'une cellule en utilisant JavaScript DOM ?
Comment obtenir le innerHTML d'une cellule en utilisant JavaScript DOM ?
- 王林avant
- 2023-09-09 17:17:021452parcourir
Dans ce tutoriel, nous apprendrons comment obtenir le innerHTML d'une cellule à l'aide du JavaScript DOM. Utilisez la propriété innerHTML en JavaScript pour obtenir le innerHTML de la cellule.
Nous pouvons facilement manipuler le DOM (Document Object Model) en utilisant document.getElementById(). C'est une méthode qui renvoie un objet élément représentant l'identifiant de l'élément mentionné dans le paramètre de la méthode. Étant donné que l'identifiant de chaque balise est unique, nous pouvons facilement accéder à l'élément par identifiant. Ensuite, l'attribut innerHTML aidera à accéder au texte ou au contenu de cette balise
Utiliser les collections de cellules de tableau
Pour accéder au contenu de n'importe quelle cellule d'un tableau, nous devons d'abord accéder à la balise table en utilisant document.getElementById(). Ensuite, en fonction du numéro de ligne et du numéro de colonne, nous accéderons à cette cellule spécifique et pourrons accéder au contenu en utilisant la propriété innerHTML.
Les numéros de ligne et les numéros de colonne commencent à 0, donc si nous voulons accéder à la première ligne, nous devons écrire row[0].
Les utilisateurs peuvent obtenir la valeur de l'attribut type du lien selon la syntaxe suivante.
Grammaire
let Cell= document.getElementById("id").rows[rowNumber].cells;
document.getElementById("result").innerHTML = Cell[colNumber].innerHTML
Dans la syntaxe ci-dessus, les utilisateurs peuvent voir que nous utilisons document.getElementById().rows[] pour accéder aux lignes. Ensuite, pour accéder aux cellules, nous avons écrit la propriété .cells. Nous accédons au contenu de la cellule en utilisant la propriété innerHTML dans la ligne suivante.
Exemple
Dans l'exemple ci-dessous, nous avons créé un tableau en utilisant les balises table, tr et td. Ensuite, pour accéder au tableau, nous avons écrit la méthode document.getElementById(). Pour accéder à la première cellule (c'est-à-dire ligne 1, colonne 1), nous obtenons les lignes [0] et les stockons dans la variable "Cell". Ensuite, pour accéder au contenu, nous utilisons Cell[0].innerHTML.
<html>
<head>
<style>
table,
td {
border: 1px solid black;
}
</style>
</head>
<body>
<h3> Get the innerHTML of a cell <i> Using
document.getElementById()</i> </h3>
<p> Click the button to get the innerHTML of first cell </p>
<table id = "myTable">
<tr>
<td> Row1 Col1 Cell 1 </td>
<td> Row1 Col2 Cell 2 </td>
</tr>
<tr>
<td> Row2 Col1 Cell 3 </td>
<td> Row2 Col2 Cell 4 </td>
</tr>
<tr>
<td> Row3 Col1 Cell 5 </td>
<td> Row3 Col2 Cell 6 </td>
</tr>
</table>
<br>
<button onclick = " getCell()"> Click Here! </button>
<p id = "result"> Result Here </p>
<script>
function getCell() {
//Getting access to cell 1
let Cell = document.getElementById("myTable").rows[0].cells;
document.getElementById("result").innerHTML =
Cell[0].innerHTML
}
</script>
</body>
</html>
Comme l'utilisateur peut le constater, après avoir cliqué sur le bouton "Cliquez ici", la fonction "getCell" est appelée, qui accède au contenu de la première cellule.
Utilisez l'attribut cellules via la saisie de l'utilisateur
Pour accéder au contenu de n'importe quelle cellule d'un tableau, nous devons d'abord accéder à la balise table en utilisant document.getElementById(). Ensuite, en fonction du numéro de ligne et du numéro de colonne, nous aurons accès à cette cellule particulière et nous pourrons accéder au contenu en utilisant l'attribut innerHTML. Ici, nous utilisons la méthode d'invite de l'objet window pour obtenir la saisie de l'utilisateur. Selon la sélection de l'utilisateur, nous pouvons accéder à la cellule.
Les numéros de ligne et les numéros de colonne commencent à 0, donc si nous voulons accéder à la première ligne, nous devons écrire row[0].
Les utilisateurs peuvent obtenir la valeur de l'attribut type du lien selon la syntaxe suivante.
Grammaire
let row = window.prompt("Enter row number");
let column = window.prompt("Enter column number");
let Cell = document.getElementById('id').rows[row].cells;
document.getElementById("result").innerHTML = Cell[col].innerHTML
Dans la syntaxe ci-dessus, nous obtenons la ligne, la colonne et le contenu de la cellule de l'utilisateur et accédons au contenu en conséquence.
Exemple
Dans l'exemple ci-dessous, nous avons créé un tableau en utilisant les balises table, tr et td. Ensuite, pour accéder au tableau, nous avons écrit la méthode document.getElementById(). Comme mentionné précédemment dans la syntaxe, nous obtenons la ligne, la colonne et le contenu de la cellule de l'utilisateur et les stockons respectivement dans les variables "row", "col" et "content".
<html>
<head>
<style>
table,
td {
border: 1px solid black;
}
</style>
</head>
<body>
<h3> Get the innerHTML of a cell using<i> document.getElementById()
</i>with user input </h3>
<p> Click the button to get innerHTML of a cell </p>
<table id = "myTable">
<tr>
<td> Row1 Col1 Cell 1 </td>
<td> Row1 Col2 Cell 2 </td>
</tr>
<tr>
<td> Row2 Col1 Cell 3 </td>
<td> Row2 Col2 Cell 4 </td>
</tr>
<tr>
<td> Row3 Col1 Cell 5 </td>
<td> Row3 Col2 Cell 6 </td>
</tr>
</table>
<br>
<button onclick="getCell()">Click Here!</button>
<p id ="result"> Result Here</p>
<script>
function getCell() {
let row = window.prompt("Enter row number: ", "0");
let col = window.prompt("Enter column number", "0")
let Cell =
document.getElementById('myTable').rows[row].cells;
document.getElementById("result").innerHTML =
Cell[col].innerHTML
}
</script>
</body>
</html>
Dans ce tutoriel, nous avons discuté d'un moyen d'obtenir le HTML interne d'une cellule à l'aide du DOM JavaScript. Nous accédons d’abord à la table en utilisant la méthode document.getElementByID(). Ensuite, nous appliquons la propriété rows pour obtenir la collection de toutes les lignes. Dans la collection Rows, nous appliquons la propriété Cells pour obtenir la collection Cells. Sur une collection de cellules, nous pouvons appliquer un index pour obtenir une cellule spécifique.
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!