Wie bekomme ich tr in Javascript?

In JavaScript müssen wir häufig bestimmte Elemente in HTML-Seiten abrufen, einschließlich des -Elements in Tabellen. Das Abrufen der -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 -Elements und verwandte Techniken vorgestellt.

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

1. Erhalten Sie das -Element anhand der ID:

Wenn die Tabelle ein ID-Attribut hat, dann verwenden wir kann document verwenden. Die Methode getElementById() ruft das Element 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 -Element sehen.

2. Erhalten Sie -Elemente nach Klassennamen:

Wenn einige Zeilen in der Tabelle denselben Klassennamen haben, können wir die Methode document.getElementsByClassName() verwenden, um die -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 -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 -Elemente sehen (die erste und dritte Zeile).

3. Erhalten Sie das -Element nach Elementtyp:

Wir können das -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 -Elemente in der Tabelle abzurufen und sie in der Zeilenvariablen zu speichern. Wenn wir schließlich Zeilen in der Konsole ausgeben, sollten wir drei -Elemente sehen.

Zusätzlich zu den oben genannten Methoden können wir auch die folgenden Techniken verwenden, um das -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 -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 -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 -Elemente sehen (die erste und dritte Zeile).

Zusammenfassung:

Das Abrufen des -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!