博客

如何使用jQuery创建一个斑马条纹的表格效果

  • Post category:jquery

下面是如何使用jQuery创建一个斑马条纹的表格效果的完整攻略。

标题

首先，在网页中引入jQuery库：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

代码块

接下来，我们需要使用jQuery来处理表格。可以使用 :even 和 :odd 选择器来选取表格中的偶数行和奇数行。然后，我们可以使用 .addClass() 方法为这些行添加 CSS 类名，以实现斑马条纹的效果。

下面是示例代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>斑马条纹表格</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <style>
    .even {
      background-color: #f2f2f2;
    }

    .odd {
      background-color: #fff;
    }
  </style>
</head>
<body>
  <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>28</td>
        <td>男</td>
      </tr>
      <tr>
        <td>王五</td>
        <td>23</td>
        <td>女</td>
      </tr>
    </tbody>
  </table>

  <script>
    // 选择所有偶数行并添加 even 类名
    $('tbody tr:even').addClass('even');
    // 选择所有奇数行并添加 odd 类名
    $('tbody tr:odd').addClass('odd');
  </script>
</body>
</html>

在上面的代码中，我们首先定义了两个 CSS 类，even 和 odd，分别用于表示偶数行和奇数行的背景颜色。然后在 JavaScript 中，我们使用 $() 函数来选取表格中的偶数行和奇数行，并使用 .addClass() 方法为它们添加对应的 CSS 类。

示例说明

下面是另一个示例，使用了带有分页的表格来演示如何使用jQuery来创建斑马条纹的效果：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>斑马条纹表格分页示例</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <style>
    .even {
      background-color: #f2f2f2;
    }

    .odd {
      background-color: #fff;
    }
  </style>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>张三</td>
        <td>25</td>
        <td>男</td>
      </tr>
      <tr>
        <td>2</td>
        <td>李四</td>
        <td>28</td>
        <td>男</td>
      </tr>
      <tr>
        <td>3</td>
        <td>王五</td>
        <td>23</td>
        <td>女</td>
      </tr>
      <!-- 省略多行数据 -->
    </tbody>
  </table>

  <div id="pagination">
    <ul>
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <!-- 省略多页数据 -->
    </ul>
  </div>

  <script>
    // 首先添加斑马条纹效果
    $('tbody tr:even').addClass('even');
    $('tbody tr:odd').addClass('odd');

    // 定义分页点击事件
    $('#pagination').on('click', 'a', function (event) {
      event.preventDefault();
      var page = $(this).text();
      $('tbody tr').hide(); // 先将所有行隐藏
      $('tbody tr').slice((page - 1) * 10, page * 10).show(); // 显示当前页的行
      $('tbody tr:visible:even').addClass('even'); // 重新为当前页的行添加斑马条纹效果
      $('tbody tr:visible:odd').addClass('odd');
    });

    // 默认显示第一页的数据
    $('tbody tr').hide();
    $('tbody tr').slice(0, 10).show();
  </script>
</body>
</html>

在上面的代码中，我们使用了一个简单的分页插件，并使用了 .slice() 方法来处理分页效果。我们先为整个表格添加斑马条纹效果，然后在分页按钮被点击时，我们先将所有行隐藏，然后仅显示当前页的行，并重新为它们添加斑马条纹效果。

Tags: