Comment obtenir tr en javascript

En JavaScript, nous avons souvent besoin d'obtenir des éléments spécifiques dans les pages HTML, notamment l'élément Obtenir les éléments est très important car ils sont souvent utilisés pour afficher des données et constituent l'un des éléments HTML les plus couramment utilisés dans les pages Web. Cet article explique comment utiliser JavaScript pour obtenir l'élément

De manière générale, nous pouvons utiliser la méthode suivante pour obtenir l'élément dans le tableau HTML :

1. Obtenir l'élément par ID :

Si le tableau a un attribut ID, alors nous peut utiliser document. La méthode getElementById() obtient l'élément Voici un exemple de code :

<table id="myTable">
  <tr>
    <td>第一行</td>
  </tr>
  <tr>
    <td>第二行</td>
  </tr>
  <tr>
    <td>第三行</td>
  </tr>
</table>

<script>
const firstRow = document.getElementById("myTable").rows[0];
console.log(firstRow);
</script>

Dans cet exemple, nous avons utilisé la méthode document.getElementById() pour obtenir l'élément de table avec l'attribut ID "myTable". Nous accédons ensuite aux lignes du tableau à l'aide du tableau .rows[] et stockons la première ligne dans la variable firstRow. Enfin, lorsque nous affichons firstRow dans la console, nous devrions voir un élément

2. Obtenir les éléments par nom de classe :

Si certaines lignes du tableau ont le même nom de classe, nous pouvons utiliser la méthode document.getElementsByClassName() pour obtenir les éléments Voici un exemple de code :

<table>
  <tr class="row-one">
    <td>第一行</td>
  </tr>
  <tr class="row-two">
    <td>第二行</td>
  </tr>
  <tr class="row-one">
    <td>第三行</td>
  </tr>
</table>

<script>
const rowOnes = document.getElementsByClassName("row-one");
console.log(rowOnes);
</script>

Dans cet exemple, nous avons utilisé la méthode document.getElementsByClassName() pour obtenir tous les éléments avec le nom de classe "row-one" et les stocker dans la variable rowOnes. Enfin, lorsque nous envoyons rowOnes sur la console, nous devrions voir deux éléments (les première et troisième lignes).

3. Récupérez l'élément par type d'élément :

Nous pouvons également obtenir l'élément dans le tableau via la méthode document.getElementsByTagName(). Voici un exemple de code :

<table>
  <tr>
    <td>第一行</td>
  </tr>
  <tr>
    <td>第二行</td>
  </tr>
  <tr>
    <td>第三行</td>
  </tr>
</table>

<script>
const rows = document.getElementsByTagName("tr");
console.log(rows);
</script>

Dans cet exemple, nous utilisons la méthode document.getElementsByTagName() pour obtenir tous les éléments Enfin, lorsque nous affichons des lignes dans la console, nous devrions voir trois éléments

En plus des méthodes ci-dessus, nous pouvons également utiliser les techniques suivantes pour obtenir l'élément  :

4. En utilisant la méthode querySelector() :

Nous pouvons utiliser la méthode querySelector() pour sélectionner un seul élément basé sur un sélecteur CSS. Voici un exemple de code :

<table>
  <tr>
    <td>第一行</td>
  </tr>
  <tr>
    <td>第二行</td>
  </tr>
  <tr>
    <td>第三行</td>
  </tr>
</table>

<script>
const firstRow = document.querySelector("tr");
console.log(firstRow);
</script>

Dans cet exemple, nous utilisons la méthode querySelector() pour sélectionner le premier élément de la table et le stocker dans la variable firstRow. Enfin, nous affichons firstRow dans la console et nous devrions voir la première ligne.

5. Utilisez la méthode querySelectorAll() :

Nous pouvons également utiliser la méthode querySelectorAll() pour sélectionner plusieurs éléments en fonction des sélecteurs CSS. Voici un exemple de code :

<table>
  <tr class="row-one">
    <td>第一行</td>
  </tr>
  <tr class="row-two">
    <td>第二行</td>
  </tr>
  <tr class="row-one">
    <td>第三行</td>
  </tr>
</table>

<script>
const rowOnes = document.querySelectorAll(".row-one");
console.log(rowOnes);
</script>

Dans cet exemple, nous avons utilisé la méthode querySelectorAll() pour sélectionner tous les éléments avec le nom de classe "row-one" dans la table et les stocker dans la variable rowOnes. Enfin, lorsque nous envoyons rowOnes sur la console, nous devrions voir deux éléments (les première et troisième lignes).

Résumé :

Obtenir l'élément en JavaScript n'est pas difficile, nous pouvons utiliser la méthode document.getElementById(), la méthode document.getElementsByClassName(), la méthode document.getElementsByTagName(), la méthode querySelector() et querySelectorAll( ) les méthodes et autres technologies sont facilement disponibles. La méthode à choisir dépend des éléments que nous souhaitons obtenir et de leur emplacement dans le document HTML. Grâce à ces technologies, nous pouvons facilement manipuler des tableaux et afficher dynamiquement des données sur des pages Web.

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!