jQuery 表格(Table)基本操作实例分析

概述

在 Web 开发中，表格数据是非常常见的。而jQuery是一款非常流行的 JavaScript 库，它提供了大量操作 DOM 的API，能够方便地实现表格数据的处理和操作。

本文将分析基本的表格操作，包括创建表格、删除表格、增加表格行和列、删除表格行和列等操作。

创建表格

创建表格需要用到<table>、<thead>、<tbody>和<tr>标签，其中<thead>和<tbody>标签是可选的。具体代码如下：

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Lucy</td>
      <td>25</td>
      <td>女</td>
    </tr>
    <tr>
      <td>Tom</td>
      <td>30</td>
      <td>男</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>29</td>
      <td>女</td>
    </tr>
  </tbody>
</table>

删除表格

如果需要删除整个表格，可以使用以下 jQuery 代码：

$("table").remove(); // 通过选择器选中表格并删除

增加表格行和列

增加行

可以使用append方法在表格最后一行添加新的行。具体代码如下：

$("table tbody").append(`
  <tr>
    <td>Mike</td>
    <td>27</td>
    <td>男</td>
  </tr>
`);

增加列

可以使用insertCell方法在指定行中添加新的列。具体代码如下：

$("table tbody tr").each(function() {
  $(this).get(0).insertCell(-1).innerHTML = "已婚";
});

删除表格行和列

删除行

可以使用remove方法删除指定的行。具体代码如下：

$("table tbody tr").eq(1).remove(); // 删除第二行

删除列

可以使用remove方法删除指定列的每一行。具体代码如下：

$("table tbody tr td:nth-child(3)").remove(); // 删除第三列

示例详解

示例1：动态生成表格

该示例演示如何使用 jQuery 动态生成表格。

<!DOCTYPE html>
<html>
<head>
  <title>jQuery动态生成表格示例</title>
  <meta charset="utf-8">
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
  <div id="container"></div>
  <script>
    // 创建表格
    var tableHtml = '<table><thead><tr><th>姓名</th><th>年龄</th><th>性别</th></tr></thead><tbody>';
    for (var i = 0; i < 5; i++) {
      tableHtml += '<tr><td>姓名' + i + '</td><td>' + (18 + i) + '</td><td>女</td></tr>';
    }
    tableHtml += '</tbody></table>';

    // 将表格添加到 HTML 中
    $("#container").append(tableHtml);
  </script>
</body>
</html>

示例2：表格操作

该示例演示如何使用 jQuery 对表格进行操作。

<!DOCTYPE html>
<html>
<head>
  <title>jQuery表格操作示例</title>
  <meta charset="utf-8">
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
  <table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>婚姻状况</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Lucy</td>
        <td>25</td>
        <td>女</td>
        <td>未婚</td>
      </tr>
      <tr>
        <td>Tom</td>
        <td>30</td>
        <td>男</td>
        <td>未婚</td>
      </tr>
      <tr>
        <td>Jane</td>
        <td>29</td>
        <td>女</td>
        <td>已婚</td>
      </tr>
    </tbody>
  </table>

  <script>
    // 增加一行
    $("table tbody").append(`
      <tr>
        <td>Mike</td>
        <td>27</td>
        <td>男</td>
        <td>未婚</td>
      </tr>
    `);

    // 增加一列
    $("table thead tr").append("<th>是否毕业</th>");
    $("table tbody tr").each(function() {
      $(this).get(0).insertCell(-1).innerHTML = "是";
    });

    // 删除一行
    $("table tbody tr").eq(1).remove();

    // 删除一列
    $("table tbody tr td:nth-child(2)").remove();
  </script>
</body>
</html>

在该示例中，我们首先创建了一个表格，并且增加了一行和一列。接着，我们删除了第二行和第二列。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery表格(Table)基本操作实例分析 - Python技术站

jQuery表格(Table)基本操作实例分析