jquery menukar tr warna gelap

Dalam reka bentuk web, jadual ialah kaedah reka letak yang biasa. Walau bagaimanapun, jika terdapat terlalu banyak baris dalam jadual, mungkin sukar bagi pengguna untuk membezakan antara baris yang berbeza, yang menjejaskan pengalaman dan kebolehgunaan pengguna. Untuk menyelesaikan masalah ini, pembangun boleh menambah beberapa kesan visual untuk membezakan baris yang berbeza. Dalam artikel ini, kami akan menggunakan jQuery untuk menukar warna baris dalam jadual untuk meningkatkan pengalaman pengguna.

Langkah pertama ialah menyediakan jadual dalam HTML. Kami akan menggambarkan proses ini menggunakan jadual ringkas dengan tiga lajur:

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
      <td>男</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>22</td>
      <td>女</td>
    </tr>
    <tr>
      <td>赵六</td>
      <td>28</td>
      <td>女</td>
    </tr>
  </tbody>
</table>

Seterusnya ialah bahagian CSS. Kami akan menetapkan gaya jadual dan warna baris:

table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  padding: 8px;
  text-align: left;
}

tr {
  border-bottom: 1px solid #ddd;
}

tr.even {
  background-color: #f2f2f2;
}

Di sini kami menetapkan gaya asas untuk jadual, termasuk pelapik dalam sel dan sempadan. Kami juga menetapkan gaya baris yang menukar warna setiap baris lain kepada kelabu.

Kini kami akan menggunakan jQuery untuk menambah gaya pada setiap baris jadual. Kami akan menggunakan pembolehubah untuk menjejak pariti baris semasa dan kemudian menambah nama kelas "genap" untuk baris genap.

$(document).ready(function() {
  $('table tbody tr:even').addClass('even');
});

Fungsi ini mula-mula menyemak sama ada dokumen telah dimuatkan dan sedia untuk beroperasi. Ia kemudian menggunakan pemilih jQuery untuk memilih subteg tr setiap teg tbody dalam jadual, menapis baris genap dan menambah nama kelas "genap" pada setiap baris genap. Selepas melakukan ini, baris genap jadual akan menukar warna latar belakang untuk menjadikannya lebih mudah dibaca.

Melalui contoh ini, kita boleh melihat cara menggunakan jQuery dan CSS untuk menukar gaya jadual. Ini bukan sahaja meningkatkan kesan visual reka bentuk web, tetapi juga meningkatkan pengalaman pengguna dan menjadikan tapak web lebih mudah untuk digunakan.

Atas ialah kandungan terperinci jquery menukar tr warna gelap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!