nilai median jadual pertanyaan jquery

Dalam pembangunan web, jadual adalah elemen biasa dan penting Cara membuat pertanyaan dan menapis data jadual adalah keperluan biasa. jQuery ialah perpustakaan JavaScript yang sangat berkuasa yang menyediakan banyak pemilih dan kaedah manipulasi DOM Artikel ini akan memperkenalkan menggunakan jQuery untuk menanyakan nilai dalam jadual.

1. Dapatkan data dalam jadual

Untuk menanyakan nilai dalam jadual, anda perlu mendapatkan data dalam jadual terlebih dahulu. Menggunakan jQuery anda boleh mendapatkan data daripada jadual dengan mudah.

Kod HTML adalah seperti berikut:

<table id="myTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Address</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>25</td>
      <td>London</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>30</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>20</td>
      <td>Paris</td>
    </tr>
  </tbody>
</table>

Kod untuk menggunakan jQuery untuk mendapatkan data jadual adalah seperti berikut:

var tableData = [];
$("#myTable tbody tr").each(function() {
  var rowData = [];
  $(this).find("td").each(function() {
    rowData.push($(this).text());
  });
  tableData.push(rowData);
});
console.log(tableData);

Kod penghuraian: tentukan dahulu tatasusunan kosong tableData, dan kemudian gunakan kaedah each() untuk melintasi Bagi setiap baris (tr) dalam jadual, gunakan kaedah find() untuk melintasi setiap sel (td) dalam baris dan tambah kandungan teks dalam sel pada tatasusunan rowData. Akhir sekali, tatasusunan rowData ditambah pada tatasusunan tableData, dengan itu memperoleh tatasusunan dua dimensi, di mana setiap subarray mewakili baris data dalam jadual.

2. Menyiasat data dalam jadual

Menyiasat data dalam jadual biasanya merangkumi dua aspek: pertanyaan mengikut baris dan pertanyaan mengikut lajur. Kedua-dua kaedah pertanyaan ini akan diperkenalkan secara terperinci di bawah.

2.1 Pertanyaan mengikut baris

Pertanyaan mengikut baris bermaksud menanyakan data baris berdasarkan nilai lajur tertentu dalam jadual. Sebagai contoh, dalam jadual di atas, anda ingin menanyakan maklumat tentang semua orang yang tinggal di "London".

Kod HTML adalah seperti berikut:

<input type="text" id="searchInput">
<button id="searchBtn">Search</button>
<table id="myTable">
  <!-- 同上 -->
</table>

Kod untuk pertanyaan mengikut baris menggunakan jQuery adalah seperti berikut:

$("#searchBtn").click(function() {
  var searchText = $("#searchInput").val().toLowerCase();
  $("#myTable tbody tr").each(function() {
    var found = false;
    $(this).each(function() {
      if ($(this).text().toLowerCase().indexOf(searchText) >= 0) {
        found = true;
        return false;
      }
    });
    if (found) $(this).show();
    else $(this).hide();
  });
});

Kod penghuraian: Mula-mula dapatkan nilai kotak teks digunakan untuk carian, tukarkannya Mereka dalam huruf kecil untuk memudahkan perbandingan seterusnya. Kemudian lintasi setiap baris dalam jadual, kemudian lintasi setiap sel dan tentukan sama ada nilai dalam sel mengandungi kata kunci dalam kotak teks carian. Jika ditemui, paparkan baris, jika tidak sembunyikan baris itu.

2.2 Pertanyaan mengikut lajur

Pertanyaan mengikut lajur bermaksud menanyakan data lajur berdasarkan nilai baris dalam jadual. Sebagai contoh, dalam jadual di atas, anda ingin menanyakan maklumat semua orang yang berumur lebih daripada 25 tahun.

Kod HTML adalah sama seperti di atas.

Kod untuk membuat pertanyaan mengikut lajur menggunakan jQuery adalah seperti berikut:

$("#searchBtn").click(function() {
  var columnIndex = 1; //查询年龄这一列
  var searchText = $("#searchInput").val().toLowerCase();
  $("#myTable tbody tr").each(function() {
    var tdValue = $(this).find("td:eq(" + columnIndex + ")").text();
    if (parseInt(tdValue) > parseInt(searchText)) $(this).show();
    else $(this).hide();
  });
});

Menghuraikan kod: Mula-mula tentukan indeks (columnIndex) lajur untuk disoal sebagai 1, iaitu lajur umur . Kemudian dapatkan nilai kotak teks carian dan tukarkannya kepada huruf kecil. Lintas setiap baris dalam jadual, dapatkan nilai lajur yang sepadan dalam setiap baris melalui kaedah eq() dan tukarkannya kepada jenis integer melalui kaedah parseInt() untuk perbandingan. Jika syarat dipenuhi, baris data dipaparkan, jika tidak baris data disembunyikan.

3. Ringkasan

Artikel ini memperkenalkan penggunaan jQuery untuk pertanyaan data dalam jadual, termasuk pertanyaan mengikut baris dan pertanyaan mengikut lajur. Melalui pemilih jQuery dan kaedah operasi DOM, anda boleh membuat pertanyaan dan menapis data jadual dengan mudah. Perlu diingat bahawa apabila jumlah data jadual adalah besar, prestasi pertanyaan mungkin terjejas, dan penyelesaian yang sesuai perlu dipilih untuk meningkatkan kecekapan pertanyaan.

Atas ialah kandungan terperinci nilai median jadual pertanyaan jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!