Petua jQuery: Cara Mengubah Sifat Baris Jadual-tutorial js-php.cn

Petua jQuery: Cara Mengubah Sifat Baris Jadual

WBOY

Lepaskan： 2024-02-27 17:27:03

asal

918 orang telah melayarinya

Petua jQuery: Cara Mengubah Sifat Baris Jadual

Tajuk: Petua jQuery: Cara Menukar Atribut Baris Jadual

Teks:

Dalam pembangunan web, jadual adalah salah satu elemen yang biasa digunakan, dan menukar atribut baris jadual melalui jQuery boleh menjadikan halaman lebih Interaktiviti dan kesan dinamik . Artikel ini akan memperkenalkan beberapa kaedah menggunakan jQuery untuk menukar sifat baris jadual dan menyediakan contoh kod khusus.

1. Tambahkan kesan tuding pada baris jadual
Untuk mencapai kesan menukar warna latar belakang baris jadual apabila tetikus melayang di atas baris jadual, anda boleh menggunakan kod berikut:

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        tr:hover {
            background-color: lightgray;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td>第一行</td>
            <td>内容</td>
        </tr>
        <tr>
            <td>第二行</td>
            <td>内容</td>
        </tr>
    </table>
</body>
</html>

Salin selepas log masuk

2. Tukar baris jadual warna berdasarkan syarat
Ya Kadangkala kita perlu menukar gaya baris jadual berdasarkan syarat tertentu, seperti memaparkan warna berbeza berdasarkan saiz nilai. Kod berikut menunjukkan cara menukar warna latar belakang baris jadual berdasarkan saiz data:

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("table tr").each(function(){
                var value = parseInt($(this).find("td:last").text());
                if(value > 50){
                    $(this).css("background-color", "green");
                } else {
                    $(this).css("background-color", "red");
                }
            });
        });
    </script>
</head>
<body>
    <table>
        <tr>
            <td>数据1</td>
            <td>60</td>
        </tr>
        <tr>
            <td>数据2</td>
            <td>40</td>
        </tr>
    </table>
</body>
</html>

Salin selepas log masuk

Di atas adalah dua kaedah biasa untuk menukar sifat baris jadual menggunakan jQuery Melalui teknik ini, anda boleh menjadikan halaman web lebih cantik dan dinamik. Saya harap kandungan artikel ini berguna kepada anda!

Atas ialah kandungan terperinci Petua jQuery: Cara Mengubah Sifat Baris Jadual. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!