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

有时我们需要在数据列表中使用斑马条纹表格来区分不同的数据行并提高可读性。通过使用 jQuery，我们可以轻松地创建这种效果。

HTML

首先，我们需要创建一个普通的HTML表格，并添加class属性为table-striped。这是为了后面的样式处理做准备。

<table class="table-striped">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>18</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

接下来，我们需要添加CSS样式来创建斑马条纹效果。我们可以选择CSS伪类nth-child或者nth-of-type来实现效果。

.table-striped tbody tr:nth-child(odd) {
  background-color: #f5f5f5;
}

这段CSS样式选择了表格中奇数行（nth-child(odd)），并将其背景色设置为淡灰色（#f5f5f5），从而实现了斑马条纹效果。

jQuery

最后，我们需要使用 jQuery 来确保样式应用于表格中的每一行。

$(document).ready(function() {
  $('table.table-striped tbody tr:nth-child(odd)').addClass('stripe');
});

这段代码首先检查文档准备就绪后，然后用 jQuery 选择所有表格中奇数行，并通过.addClass()方法为它们添加stripe类。我们可以在CSS中定义stripe类以覆盖斑马条纹CSS样式中的背景颜色。

完整代码

下面是组合后的完整代码。

<table class="table-striped">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>18</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>22</td>
      <td>女</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>28</td>
      <td>男</td>
    </tr>
  </tbody>
</table>

<style>
  .table-striped tbody tr:nth-child(odd),
  .table-striped tbody tr.stripe {
    background-color: #f5f5f5;
  }
</style>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
  $(document).ready(function() {
    $('table.table-striped tbody tr:nth-child(odd)').addClass('stripe');
  });
</script>

总结

上述代码演示了如何使用 jQuery 创建斑马条纹表格效果。我们需要添加HTML表格和CSS样式，然后通过 jQuery 为奇数行添加stripe类以应用背景色样式。