Rumah > hujung hadapan web > tutorial js > Petua jQuery: Cara Mengubah Sifat Baris Jadual

Petua jQuery: Cara Mengubah Sifat Baris Jadual

WBOY
Lepaskan: 2024-02-27 17:27:03
asal
979 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!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan