Adakah jquery mencari kandungan jadual?

Jadual ialah cara biasa untuk memaparkan data semasa menulis aplikasi web. Selalunya, jadual ini mengandungi sejumlah besar data, memerlukan pengguna mencari untuk menapis data khusus yang memenuhi keperluan mereka. Untuk ini, kita boleh menggunakan jQuery untuk melaksanakan fungsi carian jadual.

Pertama, kita perlu mencipta jadual dalam HTML dan menambah pengepala serta baris data padanya:

<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>
  </tbody>
</table>

Seterusnya, kita perlu menulis kod jQuery untuk melaksanakan fungsi carian. Mula-mula, kami menukar kandungan jadual ke dalam tatasusunan dan menyimpannya dalam pembolehubah:

$(document).ready(function() {
  var tableData = [];
  $('#myTable tbody tr').each(function(row, tr) {
    tableData[row] = {
      'name': $(tr).find('td:eq(0)').text(),
      'age': $(tr).find('td:eq(1)').text(),
      'gender': $(tr).find('td:eq(2)').text()
    }
  });
});

Dalam kod ini, kami menggunakan setiap kaedah jQuery untuk lelaran melalui setiap baris jadual dan menukarnya menjadi objek yang mengandungi An dengan 3 atribut (nama, umur, jantina). Antaranya, kami menggunakan kaedah eq untuk mendapatkan nilai indeks setiap sel, dan kaedah teks untuk mendapatkan kandungan teks dalam sel.

Seterusnya, kita boleh menulis fungsi carian yang menapis data jadual berdasarkan kata kunci yang dimasukkan oleh pengguna. Dalam fungsi ini, kami telah menggunakan kaedah grep jQuery, yang boleh digunakan untuk mencari elemen tertentu dalam tatasusunan:

function searchTable(inputVal) {
  var filteredData = $.grep(tableData, function(item) {
    return item.name.toLowerCase().indexOf(inputVal.toLowerCase()) > -1 ||
           item.age.toLowerCase().indexOf(inputVal.toLowerCase()) > -1 ||
           item.gender.toLowerCase().indexOf(inputVal.toLowerCase()) > -1;
  });
  return filteredData;
}

Dalam kod ini, kami telah menggunakan kaedah toLowerCase untuk menukar kata kunci dan data jadual kepada huruf Kecil , membenarkan carian tidak peka huruf besar-besaran. Kemudian, kami menggunakan kaedah indexOf untuk mencari data jadual yang mengandungi kata kunci.

Akhir sekali, kami perlu mengikat pengendali acara untuk memanggil fungsi carian apabila pengguna memasukkan kata kunci dan mengemas kini kandungan jadual:

$('#searchInput').on('keyup', function() {
  var inputVal = $(this).val();
  var filteredData = searchTable(inputVal);
  var tableRows = '';
  $.each(filteredData, function(index, data) {
    tableRows += '<tr>' +
                   '<td>' + data.name + '</td>' +
                   '<td>' + data.age + '</td>' +
                   '<td>' + data.gender + '</td>' +
                 '</tr>';
  });
  $('#myTable tbody').html(tableRows);
});

Dalam kod ini, kami menggunakan acara keyup Untuk mendengar kepada input pengguna dan dapatkan kata kunci dalam kotak teks. Kemudian, kami memanggil fungsi carian untuk mendapatkan data jadual yang ditapis dan menukarnya kepada kod HTML supaya kandungan jadual boleh dikemas kini.

Ringkasnya, kami menggunakan jQuery untuk menulis sekeping kod untuk melaksanakan fungsi carian jadual berasaskan kata kunci. Dengan cara ini, pengguna boleh mencari data khusus dengan mudah, meningkatkan kebolehgunaan sistem dan pengalaman pengguna.

Atas ialah kandungan terperinci Adakah jquery mencari kandungan jadual?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!