Wie bekomme ich tr in Javascript?

In JavaScript müssen wir häufig bestimmte Elemente in HTML-Seiten abrufen, einschließlich des a34de1251f0d9fe1e645927f19a896e8-Elements in Tabellen. Das Abrufen der a34de1251f0d9fe1e645927f19a896e8-Elemente ist sehr wichtig, da sie häufig zum Anzeigen von Daten verwendet werden und eines der am häufigsten verwendeten HTML-Elemente in Webseiten sind. In diesem Artikel werden die Verwendung von JavaScript zum Abrufen des a34de1251f0d9fe1e645927f19a896e8-Elements und verwandte Techniken vorgestellt.

Im Allgemeinen können wir die folgende Methode verwenden, um das a34de1251f0d9fe1e645927f19a896e8-Element in der HTML-Tabelle abzurufen:

1. Erhalten Sie das a34de1251f0d9fe1e645927f19a896e8-Element anhand der ID:

Wenn die Tabelle ein ID-Attribut hat, dann verwenden wir kann document verwenden. Die Methode getElementById() ruft das Element a34de1251f0d9fe1e645927f19a896e8 Hier ist ein Beispielcode:

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

In diesem Beispiel haben wir die Methode document.getElementById() verwendet, um das Tabellenelement mit dem ID-Attribut „myTable“ abzurufen. Anschließend greifen wir über das Array .rows[] auf die Zeilen in der Tabelle zu und speichern die erste Zeile in der Variablen firstRow. Wenn wir schließlich firstRow in der Konsole ausgeben, sollten wir ein a34de1251f0d9fe1e645927f19a896e8-Element sehen.

2. Erhalten Sie a34de1251f0d9fe1e645927f19a896e8-Elemente nach Klassennamen:

Wenn einige Zeilen in der Tabelle denselben Klassennamen haben, können wir die Methode document.getElementsByClassName() verwenden, um die a34de1251f0d9fe1e645927f19a896e8-Elemente dieser Zeilen abzurufen. Hier ist ein Beispielcode:

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

In diesem Beispiel haben wir die Methode document.getElementsByClassName() verwendet, um alle a34de1251f0d9fe1e645927f19a896e8-Elemente mit dem Klassennamen „row-one“ abzurufen und sie in der Variable rowOnes zu speichern. Wenn wir schließlich rowOnes an die Konsole ausgeben, sollten wir zwei a34de1251f0d9fe1e645927f19a896e8-Elemente sehen (die erste und dritte Zeile).

3. Erhalten Sie das a34de1251f0d9fe1e645927f19a896e8-Element nach Elementtyp:

Wir können das a34de1251f0d9fe1e645927f19a896e8-Element auch über die Methode document.getElementsByTagName() abrufen. Hier ist ein Beispielcode:

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

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

In diesem Beispiel verwenden wir die Methode document.getElementsByTagName(), um alle a34de1251f0d9fe1e645927f19a896e8-Elemente in der Tabelle abzurufen und sie in der Zeilenvariablen zu speichern. Wenn wir schließlich Zeilen in der Konsole ausgeben, sollten wir drei a34de1251f0d9fe1e645927f19a896e8-Elemente sehen.

Zusätzlich zu den oben genannten Methoden können wir auch die folgenden Techniken verwenden, um das a34de1251f0d9fe1e645927f19a896e8-Element abzurufen:

4. Mit der querySelector()-Methode:

Wir können die querySelector()-Methode verwenden, um ein einzelnes Element auszuwählen Element basierend auf einem CSS-Selektor. Hier ist ein Beispielcode:

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

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

In diesem Beispiel verwenden wir die Methode querySelector(), um das erste a34de1251f0d9fe1e645927f19a896e8-Element in der Tabelle auszuwählen und es in der Variablen firstRow zu speichern. Schließlich geben wir „firstRow“ in der Konsole aus und sollten die erste Zeile sehen.

5. Verwenden Sie die Methode querySelectorAll():

Wir können auch die Methode querySelectorAll() verwenden, um mehrere Elemente basierend auf CSS-Selektoren auszuwählen. Hier ist ein Beispielcode:

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

In diesem Beispiel haben wir die Methode querySelectorAll() verwendet, um alle a34de1251f0d9fe1e645927f19a896e8-Elemente mit dem Klassennamen „row-one“ in der Tabelle auszuwählen und sie in der Variable rowOnes zu speichern. Wenn wir schließlich rowOnes an die Konsole ausgeben, sollten wir zwei a34de1251f0d9fe1e645927f19a896e8-Elemente sehen (die erste und dritte Zeile).

Zusammenfassung:

Das Abrufen des a34de1251f0d9fe1e645927f19a896e8-Elements in JavaScript ist nicht schwierig. Wir können die Methode document.getElementById(), die Methode document.getElementsByClassName(), die Methode document.getElementsByTagName(), die Methode querySelector() und querySelectorAll( ) Methoden und andere Technologien sind leicht verfügbar. Welche Methode wir wählen, hängt davon ab, welche Elemente wir abrufen möchten und wo sie sich im HTML-Dokument befinden. Mithilfe dieser Technologien können wir Tabellen einfach manipulieren und Daten dynamisch auf Webseiten anzeigen.

Das obige ist der detaillierte Inhalt vonWie bekomme ich tr in Javascript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!