Rumah >hujung hadapan web >tutorial js >Bagaimana untuk mencipta kesan jadual berjalur berwarna-warni menggunakan jQuery?
Dalam artikel sebelumnya "Cabar bagaimana untuk membuat jadual tanpa menggunakan tag? 》Memperkenalkan anda cara membuat jadual tanpa menggunakan tag Rakan yang memerlukannya boleh mengetahui lebih lanjut~
Kandungan utama artikel ini adalah untuk mengajar anda menggunakan jQuery untuk mencipta kesan jadual berjalur berwarna-warni.
Anda mungkin bosan dengan gaya meja yang sama Hari ini saya akan memperkenalkan kepada anda cara mencipta kesan meja dengan jalur berwarna Jika anda memerlukannya, jangan ketinggalan artikel ini~
Kita boleh melihatnya terus di bawah Kod:
<html>
<head>
<meta charset="UTF-8">
<title>jquery实现彩色条纹表格</title>
<script type="text/javascript" src=
"https://code.jquery.com/jquery-3.5.1.js">
</script>
<script type="text/javascript">
$(function() {
$("table tr:nth-child(odd)")
.addClass("zebrastripe");
});
</script>
<style type="text/css">
body,
td {
font-size: 10pt;
text-align: center;
}
h1 {
color: green;
}
table {
background-color: black;
border: 1px black solid;
border-collapse: collapse;
}
th {
font-size: 15px;
padding: 5px 8px;
border: 1px outset silver;
background-color: rgb(197, 69, 69);
color: white;
}
tr {
border: 1px outset silver;
padding: 5px 8px;
background-color: white;
margin: 1px;
}
tr.zebrastripe {
background-color: green;
}
td {
border: 0.5px outset silver;
border-collapse: collapse;
padding: 5px 8px;
}
.center {
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<h1>
PHP中文网
</h1>
<table class="center">
<tr>
<th>ID</th>
<th>姓名</th>
<th>分数</th>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>112</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>109</td>
</tr>
<tr>
<td>3</td>
<td>王二</td>
<td>123</td>
</tr>
<tr>
<td>5</td>
<td>赵五</td>
<td>108</td>
</tr>
<tr>
<td>6</td>
<td>周六</td>
<td>122</td>
</tr>
</table>
</body>
</html>Kesannya adalah seperti berikut:
Dalam kod di atas, saya akan memperkenalkan kepada anda sekeping kod:
$(function() {
$("table tr:nth-child(odd)").addClass("zebrastripe");
});Dalam fungsi di sini, zebrastripe ialah nama kelas yang digunakan dan ganjil bermaksud bahawa baris ganjil akan mempunyai jalur berwarna.
Jika anda ingin menukar jalur baris genap, hanya gunakan:
$(function() {
$("table tr:nth-child(even)").addClass("zebrastripe");
})Nota:
nth-child(n) pemilih memilih elemen yang dimiliki induknya Semua elemen subelemen ke-n dari sebarang jenis. Kaedah
addClass() menambah satu atau lebih kelas pada elemen yang dipilih Kaedah ini tidak mengalih keluar atribut kelas sedia ada, tetapi hanya menambah satu atau lebih atribut kelas.
Platform tapak web PHP Cina mempunyai banyak sumber pengajaran video Semua orang dialu-alukan untuk mempelajari "tutorial video jquery" dan "tutorial asas javascript"!
Atas ialah kandungan terperinci Bagaimana untuk mencipta kesan jadual berjalur berwarna-warni menggunakan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!