jquery改變tr暗色-前端問答-PHP中文網

jquery改變tr暗色

WBOY

發布： 2023-05-28 10:45:09

原創

591 人瀏覽過

在Web設計中，表格是常見的佈局方式。然而，如果表格中的行數過多，使用者可能會很難分辨不同的行，這會影響使用者體驗和易用性。為了解決這個問題，開發者可以添加一些視覺效果來區分不同的行。在這篇文章中，我們將使用jQuery來改變表格中的行顏色，以提高使用者體驗。

第一步是在HTML中設定表格。我們將使用包含三個列的簡單表格來說明這個過程：

<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>

登入後複製

接下來是CSS的部分。我們將設定表格的樣式和行的顏色：

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

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

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

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

登入後複製

在這裡，我們為表格設定了基本樣式，包括儲存格內填滿和邊框。我們也設定了隔行變色的行樣式為灰色。

現在我們將使用jQuery為表格的每一行新增樣式。我們將使用一個變數來追蹤目前行的奇偶性，然後為偶數行添加類別名稱“even”。

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

登入後複製

這個函數首先偵測文件是否已加載，並且準備好操作。然後，它使用jQuery選擇器選擇表格中的每一個tbody標籤的tr子標籤，篩選出偶數行，並為每個偶數行添加類別名稱"even"。這樣做之後，表格的偶數行將會改變背景顏色，使其更加易讀。

透過這個例子，我們可以看到如何利用jQuery和CSS來改變表格的樣式。這不僅可以增加網頁設計的視覺效果，還可以提高使用者體驗，並且使網站更易於使用。

以上是jquery改變tr暗色的詳細內容。更多資訊請關注PHP中文網其他相關文章！