Bagaimana untuk memilih baris semasa dalam jquery-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk memilih baris semasa dalam jquery

PHPz

Lepaskan： 2023-05-11 22:31:36

asal

667 orang telah melayarinya

jQuery ialah perpustakaan JavaScript yang sangat popular yang boleh membantu pembangun dengan mudah menulis halaman web yang sangat interaktif dan responsif. Dalam jQuery, memilih elemen adalah operasi yang sangat biasa, dan memilih baris semasa (juga dipanggil penonjolan baris semasa) adalah keperluan penting dalam proses pembangunan. Dalam artikel ini, kami akan meneroka cara memilih dan menggayakan baris semasa menggunakan jQuery.

1. Analisis Keperluan

Dalam pembangunan web, kami biasanya menggunakan jadual untuk memaparkan data. Apabila kami menggerakkan tetikus ke baris (tr) jadual, kami berharap baris itu akan diserlahkan untuk mengingatkan pengguna tentang baris yang dipilih pada masa ini. Oleh itu, kita perlu menulis sekeping kod jQuery untuk mencapai keperluan ini.

2. Pelaksanaan Kod

Dalam proses merealisasikan keperluan ini, kita boleh menggunakan kaedah on() jQuery dan kaedah siblings() untuk memilih baris semasa dan menambah gaya padanya. Langkah-langkah pelaksanaan khusus adalah seperti berikut:

Ikat tetikus pada acara untuk setiap baris (tr) jadual dan peristiwa itu dicetuskan apabila tetikus bergerak ke baris tertentu.
```
$('table tr').on('mouseover', function() {
 // 鼠标滑过事件处理逻辑
});
```
Salin selepas log masuk

Dalam logik pemprosesan acara, gunakan kaedah adik-beradik() untuk memilih elemen adik-beradik baris semasa, dan kemudian tambah gaya padanya.

$('table tr').on('mouseover', function() {
 $(this).siblings().removeClass('currentRow'); // 移除其他行的样式
 $(this).addClass('currentRow'); // 为当前行添加样式
});

Salin selepas log masuk

Tentukan kelas .currentRow dalam CSS untuk menetapkan gaya baris semasa.
```
.currentRow {
 background-color: #f0f0f0;
}
```
Salin selepas log masuk

Prinsip pelaksanaan kod ini ialah apabila tetikus meluncur ke atas baris tertentu, mula-mula gunakan kaedah siblings() untuk memilih elemen adik-beradik baris semasa, iaitu, baris lain, dan kemudian gunakan kaedah removeClass( ) untuk mengalih keluar gaya sedia ada baris lain, dan akhirnya gunakan kaedah addClass() untuk menambah gaya sorotan pada baris semasa.

3. Contoh

Berikut ialah contoh mudah untuk menunjukkan cara menggunakan jQuery untuk memilih baris semasa dan menambah gaya padanya.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery选择当前行</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        table th, table td {
            padding: 10px;
            border: 1px solid #ccc;
            text-align: left;
        }
        .currentRow {
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>地址</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>18</td>
                <td>男</td>
                <td>北京市海淀区</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>20</td>
                <td>女</td>
                <td>上海市浦东新区</td>
            </tr>
            <tr>
                <td>王五</td>
                <td>22</td>
                <td>男</td>
                <td>广州市天河区</td>
            </tr>
        </tbody>
    </table>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $('table tr').on('mouseover', function() {
            $(this).siblings().removeClass('currentRow');
            $(this).addClass('currentRow');
        });
    </script>
</body>
</html>

Salin selepas log masuk

Dalam contoh di atas, kami mengikat acara peralihan tetikus pada setiap baris jadual Apabila tetikus bergerak ke baris tertentu, gunakan kaedah adik beradik() untuk memilih elemen lain baris semasa (iaitu. baris lain ), alih keluar gaya sedia ada dan akhir sekali tambahkan gaya sorotan pada baris semasa.

4. Ringkasan

Memilih baris semasa ialah operasi yang sangat biasa dalam pembangunan web dan boleh dilaksanakan dengan mudah menggunakan jQuery. Dengan menggunakan kaedah on() dan kaedah siblings(), kita boleh memilih baris semasa dan menambah gaya padanya. Pada masa yang sama, apabila menambah gaya pada baris semasa, anda harus memberi perhatian untuk menentukan kelas gaya yang sepadan dalam CSS untuk memastikan kemudahan mengubah suai gaya.

Atas ialah kandungan terperinci Bagaimana untuk memilih baris semasa dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!