Comment obtenir le innerHTML d'une cellule en utilisant JavaScript DOM ?

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.

   
  
 Get the innerHTML of a cell  Using document.getElementById() 
 
 Click the button to get the innerHTML of first cell 
 
 
 
 Row1 Col1 Cell 1 
 
 Row1 Col2 Cell 2 
 
 
 
 Row2 Col1 Cell 3 
 
 Row2 Col2 Cell 4 
 
 
 
 Row3 Col1 Cell 5 
 
 Row3 Col2 Cell 6 
 
 
 
  Click Here!  
 Result Here 
   

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".

   
  
 Get the innerHTML of a cell using document.getElementById() with user input 
 
 Click the button to get innerHTML of a cell 
 
 
 
 Row1 Col1 Cell 1 
 
 Row1 Col2 Cell 2 
 
 
 
 Row2 Col1 Cell 3 
 
 Row2 Col2 Cell 4 
 
 
 
 Row3 Col1 Cell 5 
 
 Row3 Col2 Cell 6 
 
 
 
 Click Here! 
 Result Here
   

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!