Bagaimana untuk mendapatkan tr dalam javascript

Dalam JavaScript, kita selalunya perlu mendapatkan elemen khusus dalam halaman HTML, termasuk elemen Mendapatkan elemen adalah sangat penting kerana ia sering digunakan untuk memaparkan data dan merupakan salah satu elemen HTML yang paling biasa digunakan dalam halaman web. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk mendapatkan elemen

Secara umumnya, kita boleh menggunakan kaedah berikut untuk mendapatkan elemen dalam jadual HTML:

1. Dapatkan elemen

Jika jadual mempunyai atribut ID, maka kita boleh menggunakan kaedah document.getElementById() untuk mendapatkan elemen Berikut ialah kod sampel:

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

Dalam contoh ini, kami menggunakan kaedah document.getElementById() untuk mendapatkan elemen jadual dengan atribut ID "myTable". Kami kemudiannya mengakses baris dalam jadual menggunakan tatasusunan .rows[] dan menyimpan baris pertama dalam pembolehubah firstRow. Akhir sekali, apabila kita mengeluarkan firstRow dalam konsol, kita akan melihat elemen

Dapatkan elemen mengikut nama kelas:

Jika beberapa baris dalam jadual mempunyai nama kelas yang sama, kita boleh menggunakan kaedah document.getElementsByClassName() Dapatkan elemen untuk baris ini. Berikut ialah contoh kod:

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

Dalam contoh ini, kami telah menggunakan kaedah document.getElementsByClassName() untuk mendapatkan semua elemen dengan nama kelas "row-one" dan menyimpannya dalam rowOnes dalam pembolehubah . Akhir sekali, apabila kita mengeluarkan rowOnes ke konsol, kita akan melihat dua elemen

Dapatkan elemen mengikut jenis elemen:

Kami juga boleh mendapatkan elemen dalam jadual melalui kaedah document.getElementsByTagName(). . Berikut ialah contoh kod:

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

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

Dalam contoh ini, kami menggunakan kaedah document.getElementsByTagName() untuk mendapatkan semua elemen dalam jadual dan menyimpannya dalam pembolehubah baris. Akhir sekali, apabila kita mengeluarkan baris dalam konsol, kita akan melihat tiga elemen

Selain kaedah di atas, kita juga boleh menggunakan teknik berikut untuk mendapatkan elemen

Menggunakan kaedah querySelector() :

Kita boleh Gunakan kaedah querySelector() untuk memilih satu elemen berdasarkan pemilih CSS. Berikut ialah kod sampel:

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

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

Dalam contoh ini, kami menggunakan kaedah querySelector() untuk memilih elemen pertama dalam jadual dan menyimpannya dalam pembolehubah firstRow. Akhir sekali, kami mengeluarkan firstRow dalam konsol dan kami akan melihat baris pertama.

Gunakan kaedah querySelectorAll():

Kami juga boleh menggunakan kaedah querySelectorAll() untuk memilih berbilang elemen berdasarkan pemilih CSS. Berikut ialah kod sampel:

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

Dalam contoh ini, kami menggunakan kaedah querySelectorAll() untuk memilih semua elemen dengan nama kelas "row-one" dalam jadual dan menyimpannya dalam rowOnes pembolehubah. Akhir sekali, apabila kita mengeluarkan rowOnes ke konsol, kita akan melihat dua elemen

Ringkasan:

Tidak sukar untuk mendapatkan elemen dalam JavaScript Kita boleh menggunakan kaedah document.getElementById(), kaedah document.getElementsByClassName(), document.getElementsByTagName. () kaedah , kaedah querySelector() dan kaedah querySelectorAll() boleh didapati dengan mudah. Kaedah mana yang hendak dipilih bergantung pada elemen yang ingin kita dapatkan dan di mana ia berada dalam dokumen HTML. Melalui teknologi ini, kami boleh memanipulasi jadual dengan mudah dan memaparkan data secara dinamik pada halaman web.

Atas ialah kandungan terperinci Bagaimana untuk mendapatkan tr dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!