Bagaimana untuk melintasi jadual untuk mendapatkan setiap tr dalam jquery

Semasa proses pembangunan jQuery, pemprosesan jadual adalah keperluan yang sangat biasa, dan melintasi jadual dan mengeluarkan setiap elemen tr juga merupakan salah satu operasi asas. Di bawah ini kami akan menggunakan kod sampel untuk memperkenalkan secara terperinci cara menggunakan jQuery untuk melintasi jadual dan mengalih keluar setiap elemen tr.

Pertama, kita perlu menyediakan jadual HTML yang mengandungi berbilang a34de1251f0d9fe1e645927f19a896e8 Contohnya adalah seperti berikut:

<table id="myTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>20</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>25</td>
      <td>女</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>30</td>
      <td>男</td>
    </tr>
  </tbody>
</table>

Seterusnya, kita boleh menggunakan kod berikut untuk melintasi setiap elemen tr jadual ini dan melaksanakan operasi yang berkaitan.

$("#myTable tbody tr").each(function() {
  //这里可以对每个tr元素进行操作
  console.log($(this).html());
});

Dalam kod di atas, kami menggunakan pemilih jQuery $("#myTable tbody tr") untuk memilih semua elemen tr dalam teg tbody dalam jadual. Seterusnya, gunakan kaedah .each() untuk melintasi dan mengendalikan setiap elemen tr. Di sini, kami telah mencetak kandungan setiap elemen tr ke konsol, yang boleh anda gantikan dengan kod yang anda perlukan.

Perlu diambil perhatian bahawa kami menggunakan #myTable dalam pemilih untuk mendapatkan keseluruhan jadual, dan tbody digunakan untuk mendapatkan bahagian kandungan jadual untuk mengelak daripada melintasi pengepala jadual.

Selain itu, semasa pengendalian elemen jadual, anda juga boleh mendapatkan sub-elemen td dalam setiap elemen tr dan mengendalikannya. Contoh berikut menunjukkan cara untuk mendapatkan semua elemen td dalam setiap tr.

$("#myTable tbody tr").each(function() {
  //获取当前行的td元素
  $(this).children('td').each(function() {
    //这里可以对每个td元素进行操作
    console.log($(this).html());
  });
});

Kod di atas memperoleh semua elemen td baris semasa melalui $(this).children('td'), dan kemudian menggunakan kaedah .each() untuk melintasi dan melaksanakan operasi yang berkaitan.

Ringkasan: Melalui kod contoh di atas, kita dapat melihat bahawa sangat mudah untuk menggunakan jQuery untuk melintasi jadual dan mengeluarkan setiap elemen tr Anda hanya perlu menggunakan pemilih untuk mendapatkan elemen tr dalam jadual atau gunakan pemilih sub-elemen untuk mendapatkan elemen tr td, dan kemudian gunakan kaedah .each() untuk melintasi. Sudah tentu, anda boleh melakukan operasi berkaitan pada setiap elemen tr atau td mengikut keperluan sebenar untuk mencapai paparan jadual tersuai.

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