Ubah suai jadual dalam jquery

jQuery (disebut "Jackway") ialah perpustakaan JavaScript popular yang digunakan untuk memudahkan manipulasi DOM, pemprosesan kesan khas dan tindak balas acara dalam pembangunan web. Dengan menggunakan jQuery, anda boleh mengubah suai sifat dan gaya jadual HTML dengan mudah. Dalam artikel ini, kita akan membincangkan cara menggunakan jQuery untuk mengubah suai kandungan, gaya, dan menambah baris dan lajur jadual HTML.

Ubah suai kandungan jadual

Mengubah suai kandungan jadual dicapai dengan memanipulasi kandungan teks unsur HTML. Dalam jQuery, anda boleh menggunakan kaedah .text() untuk mendapatkan dan menetapkan kandungan teks sesuatu elemen. Berikut ialah contoh cara menggunakan jQuery untuk mengubah suai baris pertama dalam jadual untuk membaca "Ini adalah pengepala baharu":

<table>
    <tr>
        <th>旧表头1</th>
        <th>旧表头2</th>
        <th>旧表头3</th>
    </tr>
    <tr>
        <td>内容1-1</td>
        <td>内容1-2</td>
        <td>内容1-3</td>
    </tr>
    <tr>
        <td>内容2-1</td>
        <td>内容2-2</td>
        <td>内容2-3</td>
    </tr>
</table>

$("table tr:first th:first").text("这是新的表头");

Dalam contoh ini, pemilih $("table tr:first th: first" ) memilih sel pertama dalam jadual. Kemudian, gunakan kaedah .text() untuk mengubah suai kandungan teksnya kepada "Ini ialah pengepala baharu."

Ubah suai gaya jadual

Gaya jadual boleh dikawal dengan CSS. jQuery menyediakan beberapa kaedah untuk memanipulasi gaya elemen. Yang paling biasa digunakan ialah kaedah .addClass() dan .removeClass(). Kaedah ini menambah atau mengalih keluar kelas pada elemen, dengan itu mengubah suai gayanya. Kod berikut menunjukkan cara menggunakan jQuery untuk menukar baris dalam jadual menjadi warna latar belakang biru:

<table>
    <tr>
        <th>表头1</th>
        <th>表头2</th>
        <th>表头3</th>
    </tr>
    <tr>
        <td>内容1-1</td>
        <td>内容1-2</td>
        <td>内容1-3</td>
    </tr>
    <tr>
        <td>内容2-1</td>
        <td>内容2-2</td>
        <td>内容2-3</td>
    </tr>
</table>

$("table tr:nth-child(2)").addClass("blue-background");

Dalam contoh ini, jadual dipilih menggunakan pemilih $("table tr:nth-child(2 )") Baris kedua dalam , iaitu baris kandungan. Kemudian, tambahkan gaya "latar belakang biru" pada baris menggunakan kaedah .addClass("latar belakang biru").

Tambah baris dan lajur

Untuk menambah baris dan lajur baharu pada jadual, anda perlu menggunakan kaedah .append() jQuery. Kaedah ini menambah elemen baharu pada penghujung elemen yang ditentukan. Berikut ialah contoh yang menunjukkan cara menambah baris pada penghujung jadual menggunakan jQuery:

<table>
    <tr>
        <th>表头1</th>
        <th>表头2</th>
        <th>表头3</th>
    </tr>
    <tr>
        <td>内容1-1</td>
        <td>内容1-2</td>
        <td>内容1-3</td>
    </tr>
    <tr>
        <td>内容2-1</td>
        <td>内容2-2</td>
        <td>内容2-3</td>
    </tr>
</table>

$("table").append("<tr><td>新内容1</td><td>新内容2</td><td>新内容3</td></tr>");

Dalam contoh ini, elemen jadual dipilih menggunakan pemilih $("table"). Kemudian, gunakan kaedah .append() untuk menambah barisan

Berikut ialah contoh yang menunjukkan cara menambah lajur pada jadual menggunakan jQuery:

<table>
    <tr>
        <th>表头1</th>
        <th>表头2</th>
        <th>表头3</th>
    </tr>
    <tr>
        <td>内容1-1</td>
        <td>内容1-2</td>
        <td>内容1-3</td>
    </tr>
    <tr>
        <td>内容2-1</td>
        <td>内容2-2</td>
        <td>内容2-3</td>
    </tr>
</table>

Dalam contoh ini, pemilih $("table tr") memilih setiap baris dalam jadual. Kemudian, gunakan kaedah .each() untuk berulang melalui setiap baris dan gunakan kaedah .append() untuk menambah elemen

Kesimpulan

Dalam artikel ini, kami mempelajari cara menggunakan jQuery untuk mengubah suai kandungan dan gaya jadual HTML, dan cara menambah baris dan lajur baharu pada jadual. Dengan memahami teknologi ini, pembangun boleh membuat jadual HTML yang dinamik dan interaktif dengan lebih mudah, dengan itu meningkatkan pengalaman pengguna. Apabila membangunkan borang, adalah disyorkan untuk menggunakan rangka kerja JavaScript seperti jQuery dan bukannya kod tulisan tangan untuk meningkatkan kecekapan pembangunan dan kualiti kod.

Atas ialah kandungan terperinci Ubah suai jadual dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!