Bagaimana untuk mengubah suai jadual dengan jquery

Dalam beberapa tahun kebelakangan ini, dengan perkembangan pesat teknologi Web, jQuery telah menjadi salah satu perpustakaan JavaScript yang paling popular dalam pembangunan bahagian hadapan. Ia boleh membantu kami mengurus dokumen HTML, mengendalikan elemen DOM, pengendalian acara, dsb. dengan lebih mudah.

Dalam proses pembangunan web, jadual ialah cara penting untuk memaparkan data. Walau bagaimanapun, kadangkala, kita perlu mengubah suai dan mengedit borang. jQuery memberikan kami fungsi berkuasa yang boleh membantu kami mengubah suai jadual dengan mudah. Seterusnya kami akan menerangkan cara mengubah suai jadual dengan jquery.

1. Tambahkan baris jadual secara dinamik

Biasanya, akan ada beberapa baris jadual dalam halaman kami yang perlu ditambah atau dipadamkan dalam masa nyata. Contohnya, dalam senarai troli beli-belah di tapak web beli-belah, pengguna boleh menambah atau memadam item dalam troli beli-belah. Pada ketika ini, ia akan menjadi sangat memakan masa dan menyusahkan untuk menambah dan memadam baris jadual secara manual setiap kali. jQuery memberikan kami kaedah seperti "append()", "prepend()", "after()" dan "before()", yang boleh menambah dan memadam baris jadual secara dinamik dengan mudah.

Sebagai contoh, jika kita ingin menambah satu baris pada jadual, kita boleh menggunakan kod berikut:

$("table").append("<tr><td>新行数据 1</td><td>新行数据 2</td></tr>");

Selepas melaksanakan kod di atas, satu baris akan ditambah pada baris terakhir bagi jadual. Kandungan baris ini ialah "Data1 baris baharu" dan "Data Baris Baharu".

2. Operasi dinamik data jadual

Kadangkala, kita perlu mengubah suai data jadual sedia ada, contohnya, data dalam lajur jadual perlu dikemas kini. jQuery menyediakan kaedah "text()" dan "html()" untuk mengubah suai data jadual dengan mudah.

Sebagai contoh, jika kita ingin mengubah suai data dalam lajur kedua jadual, kita boleh menggunakan kod berikut:

$("table tr td:nth-child(2)").text("新的数据");

Kod di atas akan mengemas kini semua data dalam lajur kedua daripada jadual kepada "data baharu".

3. Laksanakan fungsi pengisihan jadual

Jika terdapat jadual yang mempunyai banyak data, fungsi pengisihan jadual biasanya akan disediakan supaya pengguna boleh melihat dan membandingkan data dengan mudah. Di sini kita boleh menggunakan kaedah "boleh disusun" dalam perpustakaan UI jQuery untuk melaksanakan fungsi pengisihan jadual dengan sangat mudah.

Sebagai contoh, kami mempunyai jadual berikut:

<table>
    <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>18</td>
            <td>男</td>
        </tr>
        <tr>
            <td>小芳</td>
            <td>22</td>
            <td>女</td>
        </tr>
    </tbody>
</table>

Kita boleh menggunakan kod berikut untuk melaksanakan pengisihan jadual:

$(function(){
    $("table tbody").sortable({
        placeholder : "ui-state-highlight"
    });
});

Antaranya, fungsi "sortable()" akan berada dalam jadual Tambah fungsi boleh seret dan mengisih baris yang diseret secara automatik, dengan "tempat letak" ialah ruang letak Apabila satu baris diseret, kedudukan yang diduduki akan diduduki buat sementara waktu oleh pemegang tempat ini.

Selepas kod di atas dilaksanakan, baris dalam jadual boleh diseret sesuka hati, dengan itu merealisasikan fungsi pengisihan jadual.

4. Carian masa nyata untuk data jadual

Dalam sesetengah jadual dengan jumlah data yang besar, kami boleh menyediakan fungsi carian untuk membolehkan pengguna mencari data yang mereka perlu cari dengan cepat. Di sini kita boleh menggunakan kaedah "penapis" jQuery untuk mencapai carian masa nyata data jadual.

Sebagai contoh, kami mempunyai jadual berikut:

<table>
    <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>18</td>
            <td>男</td>
        </tr>
        <tr>
            <td>小芳</td>
            <td>22</td>
            <td>女</td>
        </tr>
    </tbody>
</table>

Kami boleh menggunakan kod berikut untuk melaksanakan carian masa nyata data jadual:

$(function(){
    $("#search_input").keyup(function(){
        var keyword = $(this).val();
        $("table tbody tr").hide().filter(":contains('"+ keyword +"')").show();
    });
});

Dalam kod di atas, kaedah "keyup()" Perubahan dalam kotak input kotak carian dipantau dan dicetuskan apabila papan kekunci ditekan. Seterusnya, dapatkan kata kunci dalam kotak input, tapis baris yang sepadan melalui "penapis()", dan akhirnya memaparkan hasil carian melalui "tunjukkan()".

Melalui kaedah di atas, kami boleh mengubah suai, mengisih, mencari dan operasi lain di atas meja dengan mudah untuk meningkatkan pengalaman pengguna halaman.

Atas ialah kandungan terperinci Bagaimana untuk mengubah suai jadual dengan jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!