jQuery实现table表格信息的展开和缩小功能示例

那么对于实现table表格信息的展开和缩小功能，可以借助jQuery来完成。下面我会给出完整的攻略。

1. 初始HTML结构和CSS样式

首先，我们需要给出table的初始HTML结构和CSS样式，如下所示：

<table>
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Age</th>
      <th>Gender</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Tom</td>
      <td>20</td>
      <td>Male</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jerry</td>
      <td>22</td>
      <td>Male</td>
    </tr>
    ...
  </tbody>
</table>

table {
  border-collapse: collapse;
  width: 100%;
  max-width: 600px;
}

th, td {
  border: 1px solid #ddd;
  padding: 5px;
  text-align: center;
}

th {
  background-color: #f2f2f2;
}

2. 编写jQuery代码

接下来，就是编写jQuery代码实现table的展开和缩小功能了。我们需要给每个tr添加一个按钮来控制其展开或缩小。当展开时，会显示这个tr的详细信息；当缩小时，隐藏这个tr的详细信息。

$(function() {
  // 给每个tr添加按钮
  $("tbody tr").append("<td><button>详情</button></td>");

  // 给按钮绑定点击事件
  $("tbody tr button").click(function() {
    var detail = $(this).parents("tr").find(".detail");
    if (detail.length === 0) {
      // 当详细信息不存在时，创建节点并显示
      var html = "<tr class='detail'><td colspan='4'>这是一条详细信息</td></tr>";
      var tr = $(this).parents("tr");
      tr.after(html);
      $(this).text("收起");
    } else {
      // 当详细信息存在时，隐藏节点
      detail.remove();
      $(this).text("详情");
    }
  });
});

在上面的代码中，我们先给每个tr添加按钮，然后给按钮绑定点击事件。点击按钮时，会查找它所在的tr节点，然后判断它的详细信息是否已经存在。如果不存在，就创建一个新的节点，并显示详细信息。如果已经存在，就隐藏这个节点。

另外，我们在创建详细信息节点时，设置它的class为"detail"，方便后续操作。同时，为了让详细信息节点占满整行，我们将它的colspan设置为4（即与表头的列数保持一致）。

3. 示例说明

下面给出两个示例说明，帮助大家更好地理解上面的代码。

示例一

初始状态下，table表格如下所示：

#	Name	Age	Gender
1	Tom	20	Male
2	Jerry	22	Male
3	Alice	19	Female

点击第二行的详情按钮后，table表格如下所示：

#	Name	Age	Gender
1	Tom	20	Male
2	Jerry	22	Male
	这是一条详细信息
3	Alice	19	Female

示例二

初始状态下，table表格如下所示：

#	Name	Age	Gender
1	Tom	20	Male
2	Jerry	22	Male
3	Alice	19	Female

点击第三行的详情按钮后，table表格如下所示：

#	Name	Age	Gender
1	Tom	20	Male
2	Jerry	22	Male
3	Alice	19	Female
	这是一条详细信息

点击第三行的收起按钮后，table表格重新变为初始状态。