jquery memadam empat baris data dalam jadual-Soal Jawab bahagian hadapan-php.cn

jquery memadam empat baris data dalam jadual

WBOY

Lepaskan： 2023-05-23 16:02:08

asal

521 orang telah melayarinya

Dalam aplikasi web, jadual ialah elemen antara muka yang sangat biasa dan penting. Baris dan lajur dalam jadual digunakan untuk memaparkan data atau menyediakan pilihan menu. Walau bagaimanapun, kadangkala kita perlu memadam beberapa baris data dalam jadual, seperti apabila pengguna melakukan operasi padam. Artikel ini akan memperkenalkan cara menggunakan jQuery untuk memadam empat baris data dalam jadual.

Langkah 1: Cipta jadual HTML

Perkara pertama yang perlu dilakukan ialah mencipta jadual HTML supaya anda boleh menggunakan jQuery untuk memadam empat baris data dalam jadual. Kod HTML adalah seperti berikut:

<table id="myTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
      <td>男</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>28</td>
      <td>女</td>
    </tr>
    <tr>
      <td>赵六</td>
      <td>35</td>
      <td>男</td>
    </tr>
    <tr>
      <td>小红</td>
      <td>23</td>
      <td>女</td>
    </tr>
    <tr>
      <td>小明</td>
      <td>26</td>
      <td>男</td>
    </tr>
  </tbody>
</table>

Salin selepas log masuk

Jadual ini mengandungi pengepala dan 6 baris data, setiap satunya mengandungi tiga lajur data: nama, umur dan jantina. Matlamat kami adalah untuk memadam empat baris pertama data dalam jadual.

Langkah 2: Gunakan jQuery untuk memilih baris data yang perlu dipadamkan

Untuk memadamkan empat baris pertama data dalam jadual, kita perlu menggunakan pemilih jQuery untuk pilih empat baris data ini. Kodnya adalah seperti berikut:

var rowsToDelete = $('#myTable tbody tr:lt(4)');

Salin selepas log masuk

Baris kod ini menggunakan kaedah panggilan berantai Mula-mula, gunakan $('#myTable') untuk memilih jadual, kemudian gunakan :lt(4) untuk memilih empat baris pertama data, dan akhirnya. gunakan tbody tr untuk memilih semua data baris. Dengan cara ini, pembolehubah rowsToDelete ialah semua data baris yang perlu dipadamkan.

Langkah 3: Gunakan jQuery untuk memadamkan data baris yang dipilih

Dengan data baris jadual yang dipilih, kami boleh menggunakan jQuery untuk memadamkan baris ini. Kodnya adalah seperti berikut:

rowsToDelete.remove();

Salin selepas log masuk

Barisan kod ringkas ini menggunakan kaedah remove() jQuery untuk memadamkan data baris jadual yang dipilih.

Langkah 4: Sahkan hasil pemadaman

Untuk mengesahkan sama ada empat baris pertama data berjaya dipadamkan, kita boleh menggunakan kod berikut untuk mengeluarkan data jadual ke konsol:

console.log($('#myTable tbody tr'));

Salin selepas log masuk

Jika Empat baris pertama data telah berjaya dipadamkan, dan hanya dua baris terakhir data akan dipaparkan pada konsol.

Kod lengkap adalah seperti berikut:

<html>
  <head>
    <title>jQuery删除表格四行数据</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
      $(document).ready(function(){
        var rowsToDelete = $('#myTable tbody tr:lt(4)');
        rowsToDelete.remove();
        console.log($('#myTable tbody tr'));
      });
    </script>
  </head>
  <body>
    <table id="myTable">
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>张三</td>
          <td>25</td>
          <td>男</td>
        </tr>
        <tr>
          <td>李四</td>
          <td>30</td>
          <td>男</td>
        </tr>
        <tr>
          <td>王五</td>
          <td>28</td>
          <td>女</td>
        </tr>
        <tr>
          <td>赵六</td>
          <td>35</td>
          <td>男</td>
        </tr>
        <tr>
          <td>小红</td>
          <td>23</td>
          <td>女</td>
        </tr>
        <tr>
          <td>小明</td>
          <td>26</td>
          <td>男</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Salin selepas log masuk

Coretan kod yang disediakan dalam artikel ini boleh digunakan sebagai asas untuk mempelajari operasi jQuery memadam data baris jadual Pembaca boleh mengubah suai kod tersebut kepada keperluan sebenar untuk menyesuaikan diri dengan senario aplikasi mereka sendiri.

Atas ialah kandungan terperinci jquery memadam empat baris data dalam jadual. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!