如何使用 jQuery 创建斑马条纹表格效果？

在 Web 开发中，表格是非常常用的元素之一。为了让表格更美观，我们会给它加上斑马条纹效果。而使用 jQuery 创建斑马条纹表格效果非常简单，本文将介绍如何实现。

HTML 结构

首先，我们需要有一个表格。HTML 结构应该是这样的：

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

jQuery 实现

接下来，我们使用 jQuery 给表格加上斑马条纹效果。代码如下：

$(function() {
  $('tbody tr:odd').addClass('odd');
});

上面的代码，首先等到页面完全加载后，选择表格中的奇数行，并添加一个 class 为 "odd" 的样式。我们在 CSS 中添加如下样式：

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

th, td {
  border: 1px solid #ccc;
  padding: 8px;
}

thead {
  background-color: #f2f2f2;
}

.odd {
  background-color: #f9f9f9;
}

解释一下 CSS 样式：

• border-collapse: collapse ：合并表格边框；

• width: 100% ：设置表格宽度为 100%；

• border: 1px solid #ccc ：设置单元格上、下、左、右都有 1px 的灰色边框；

• padding: 8px ：设置单元格的内边距为 8px；

• thead ：设置表头的背景颜色为 #f2f2f2；

• .odd ：设置奇数行的背景颜色为 #f9f9f9。

效果展示

最后，我们来看一下效果展示：

效果很不错，像这样给表格添加上斑马条纹效果，可以让用户更容易区分表格中的数据，提高用户体验。