jquery secara dinamik menetapkan tr untuk ditunjukkan dan disembunyikan

Dengan sejumlah besar data dan maklumat yang dipaparkan pada halaman web, bar skrol dan paging tidak lagi dapat memenuhi keperluan kami. Oleh itu, kami memerlukan beberapa cara yang lebih baik untuk memaparkan dan menyembunyikan data. Artikel ini akan memperkenalkan cara menggunakan jQuery untuk menetapkan paparan dan penyembunyian tr secara dinamik, dan terus memaparkan atau menyembunyikan data dalam jadual.

1. Kosongkan jadual

Dalam proses penetapan jadual secara dinamik, sebaiknya kosongkan jadual dahulu. Gunakan kod berikut untuk mengosongkan jadual:

$("#myTable tbody tr").remove();

Di mana, #myTable ialah ID jadual yang anda mahu kendalikan, tbody mewakili badan jadual dan tr ialah baris jadual.

2. Paparkan semua baris

Untuk memaparkan semua baris dalam jadual, anda boleh menggunakan kod berikut:

$("#myTable tbody tr").show();

Dengan cara ini, semua baris jadual akan menjadi dipaparkan.

3. Sembunyikan semua baris

Untuk menyembunyikan semua baris dalam jadual, anda boleh menggunakan kod berikut:

$("#myTable tbody tr").hide();

Ini akan menyembunyikan semua baris jadual.

4. Paparkan baris mengikut syarat

Gunakan kod berikut untuk memaparkan baris mengikut syarat:

$("#myTable tbody tr").filter(function () {
    return $(this).text().indexOf("条件") !== -1;
}).show();

Antaranya, syarat boleh diubah suai mengikut keperluan anda. Kaedah ini boleh memaparkan baris berdasarkan kriteria tertentu, seperti kandungan teks, kelas atau atribut lain.

5. Sembunyikan baris berdasarkan syarat

Gunakan kod berikut untuk menyembunyikan baris berdasarkan syarat:

$("#myTable tbody tr").filter(function () {
    return $(this).text().indexOf("条件") !== -1;
}).hide();

Ini akan menyembunyikan baris berdasarkan syarat yang ditentukan.

6. Cari baris

Gunakan kod jQuery berikut untuk mencari baris jadual:

$("#myTable tbody tr").each(function () {
    var rowText = $(this).text().toLowerCase();
    $('input[type="text"]').keyup(function () {
        if ($(this).val().toLowerCase() === "" || rowText.indexOf($(this).val().toLowerCase()) !== -1) {
            $(this).closest("tr").show();
        } else {
            $(this).closest("tr").hide();
        }
    });
});

Kod ini mula-mula merentasi semua baris jadual dan memasukkan teks dalam kotak input. Jika kotak teks tiada kandungan, semua baris dipaparkan jika padanan ditemui, hanya baris yang sepadan dipaparkan jika tidak, semua baris yang tinggal disembunyikan.

7. Ringkasan

Menggunakan jQuery, sangat mudah untuk menetapkan paparan dan penyembunyian baris jadual secara dinamik. Artikel ini menerangkan cara mengosongkan jadual, menunjukkan atau menyembunyikan semua baris, menunjukkan atau menyembunyikan baris secara bersyarat dan cara mencari baris jadual. Teknik ini membolehkan anda memaparkan data dengan lebih baik dan meningkatkan pengalaman pengguna.

Atas ialah kandungan terperinci jquery secara dinamik menetapkan tr untuk ditunjukkan dan disembunyikan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!