Bagaimana untuk mendapatkan watak tertentu dalam jadual dengan jquery

jQuery ialah pustaka JavaScript popular yang digunakan untuk memudahkan skrip sebelah pelanggan. Apabila membangunkan halaman web, selalunya perlu untuk mendapatkan semula aksara atau data daripada jadual HTML. Artikel ini akan memperkenalkan cara menggunakan jQuery untuk mendapatkan aksara tertentu dalam jadual HTML.

Jadual HTML ialah salah satu elemen yang paling biasa pada halaman web. Jadual HTML biasanya terdiri daripada satu siri baris dan lajur. Setiap sel boleh mengandungi teks, imej, butang dan elemen HTML lain.

Sebelum menggunakan jQuery untuk mendapatkan data daripada jadual HTML, pastikan anda telah menambahkan fail perpustakaan jQuery ke halaman web anda Ini boleh dicapai dengan:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Sebaik sahaja anda Menggunakan kod di atas untuk menambah fail perpustakaan jQuery ke halaman web anda, dan kemudian anda boleh mula mendapatkan aksara tertentu dalam jadual HTML.

Menggunakan jQuery untuk mendapatkan aksara tertentu dalam jadual HTML boleh dibahagikan kepada dua langkah berikut:

1. Pilih jadual
2. Dapatkan data sel

Berikut ialah penjelasan terperinci:

1. Pilih jadual

Untuk memilih jadual HTML, anda boleh menggunakan dua kaedah berikut:

Kaedah 1: Gunakan pemilih ID untuk memilih jadual

Jika anda menentukan atribut ID untuk jadual, anda boleh menggunakan kod berikut untuk memilih jadual:

<table id="myTable">
  <tr>
    <td>字符1</td>
    <td>字符2</td>
    <td>字符3</td>
  </tr>
  <tr>
    <td>字符4</td>
    <td>字符5</td>
    <td>字符6</td>
  </tr>
  <tr>
    <td>字符7</td>
    <td>字符8</td>
    <td>字符9</td>
  </tr>
</table>

var myTableCell = $('#myTable tr:nth-child(1) td:nth-child(2)').text();
console.log(myTableCell); //输出"字符2"

Dalam Dalam kod di atas, kami menggunakan pemilih ID (#myTable) untuk memilih jadual, tr:nth-child(1) untuk memilih baris pertama dalam jadual dan td:nth -child(2) untuk memilih lajur kedua Akhir sekali gunakan fungsi .text() untuk mendapatkan data sel.

Kaedah 2: Gunakan pemilih kelas untuk memilih jadual

Jika anda tidak menentukan atribut ID untuk jadual, anda boleh menggunakan pemilih kelas untuk memilih meja. Berikut ialah contoh mudah menggunakan pemilih kelas untuk mendapatkan data daripada jadual HTML:

<table class="myTable">
  <tr>
    <td>字符1</td>
    <td>字符2</td>
    <td>字符3</td>
  </tr>
  <tr>
    <td>字符4</td>
    <td>字符5</td>
    <td>字符6</td>
  </tr>
  <tr>
    <td>字符7</td>
    <td>字符8</td>
    <td>字符9</td>
  </tr>
</table>

var myTableCell = $('.myTable tr:nth-child(1) td:nth-child(2)').text();
console.log(myTableCell); //输出"字符2"

Dalam kod di atas, kami menggunakan pemilih kelas untuk memilih jadual dan kaedah yang sama untuk pilih sel tertentu.

2. Dapatkan data sel

Setelah anda berjaya memilih jadual dan menentukan baris dan lajur sel yang anda ingin dapatkan, maka anda boleh Gunakan .text( ) berfungsi untuk mendapatkan data teks sel. Berikut ialah contoh mudah:

var myTableCell = $('#myTable tr:nth-child(1) td:nth-child(2)').text();
console.log(myTableCell); //输出"字符2"

Kod di atas akan mengeluarkan data sel dalam baris pertama dan lajur kedua jadual.

Ringkasan

Mendapatkan aksara tertentu dalam jadual HTML ialah salah satu operasi yang sering digunakan semasa membangunkan halaman web. Tugas ini boleh dibuat dengan sangat mudah menggunakan perpustakaan jQuery. Anda boleh menggunakan fungsi .text() untuk mendapatkan data sel dengan hanya memilih jadual dan mengenal pasti baris dan lajur sel yang anda ingin dapatkan.

Atas ialah kandungan terperinci Bagaimana untuk mendapatkan watak tertentu dalam jadual dengan jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!