Bagaimana untuk menukar atribut baris jadual menggunakan jQuery-tutorial js-php.cn

Bagaimana untuk menukar atribut baris jadual menggunakan jQuery

WBOY

Lepaskan： 2024-02-27 10:36:03

asal

1040 orang telah melayarinya

Bagaimana untuk menukar atribut baris jadual menggunakan jQuery

Cara menggunakan jQuery untuk menukar atribut baris jadual

Dalam pembangunan web, jadual ialah cara biasa untuk memaparkan data. Kadangkala kita perlu menukar sifat baris jadual berdasarkan operasi pengguna atau keadaan tertentu, seperti menukar warna baris, fon, dsb. Fungsi ini boleh dicapai dengan mudah menggunakan jQuery.

Berikut ialah contoh mudah untuk menggambarkan cara menggunakan jQuery untuk menukar atribut baris jadual. Mula-mula, kita memerlukan struktur HTML asas:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>利用jQuery改变表格行的属性</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<table id="data-table">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr class="row">
<td>张三</td>
<td>25</td>
<td>男</td>
</tr>
<tr class="row">
<td>李四</td>
<td>30</td>
<td>女</td>
</tr>
<tr class="row">
<td>王五</td>
<td>28</td>
<td>男</td>
</tr>
</tbody>
</table>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="script.js"></script>
</body>
</html>

Salin selepas log masuk

Kemudian buat fail styles.css baharu untuk mentakrifkan gaya Contoh kod adalah seperti berikut: styles.css文件用于定义样式，示例代码如下：

.row {
  background-color: #f1f1f1;
}

.row.highlight {
  background-color: #ffcccb;
}

Salin selepas log masuk

接着新建一个script.js文件，用于编写jQuery代码：

$(document).ready(function() {
  $('.row').click(function() {
    $(this).toggleClass('highlight');
  });
});

Salin selepas log masuk

在上面的代码中，我们首先通过jQuery选择所有具有row类名的表格行，然后为这些表格行添加了一个点击事件。当用户点击某一行时，会切换该行的highlightrrreee

Kemudian buat skrip baharu. jscode> fail untuk menulis kod jQuery:

rrreee

Dalam kod di atas, kami mula-mula memilih semua baris jadual dengan nama kelas row melalui jQuery dan kemudian menambah acara klik untuk baris jadual ini. Apabila pengguna mengklik pada baris, nama kelas highlight baris tersebut akan ditukar, sekali gus menukar warna latar belakang baris tersebut.

Melalui langkah di atas, kami telah melaksanakan fungsi menggunakan jQuery untuk menukar atribut baris jadual. Dengan cara ini, pengguna boleh menukar gaya baris dengan mengklik pada baris untuk mencapai kesan interaktif. Sudah tentu, mengikut keperluan sebenar, kami juga boleh mengubah suai atribut lain, seperti warna teks, saiz fon, dll. 🎜🎜Ringkasnya, menggunakan jQuery boleh merealisasikan fungsi menukar atribut baris jadual dengan mudah Melalui kod ringkas, anda boleh mencapai beberapa kesan hebat dan menambah interaktiviti dan keindahan pada halaman web. Saya harap contoh di atas berguna kepada pembangun yang ingin belajar cara menggunakan jQuery untuk menukar sifat baris jadual. 🎜

Atas ialah kandungan terperinci Bagaimana untuk menukar atribut baris jadual menggunakan jQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!