Jquery 动态生成表格示例代码

下面是详细讲解：

Jquery 动态生成表格示例代码

相关知识

在开始讲解代码之前，需要掌握以下基本知识：

• html 表格的结构
• Jquery 的 DOM 操作
• Jquery 的选择器

示例 1：静态表格的动态生成

以下是静态表格的结构：

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

以下是动态生成表格的 Jquery 代码：

// 为表格添加新的一行
$("#myTable tbody").append("<tr><td>赵六</td><td>24</td><td>女</td></tr>");

代码说明：

• 首先通过 Jquery 的选择器获取到了表格的 tbody 元素
• 在 tbody 元素上使用 append 方法向其中添加一行，使用 HTML 标签描述行的结构

示例 2：基于数据动态生成表格

以下是数据：

var data = [
  { name: "张三", age: 18, gender: "男" },
  { name: "李四", age: 20, gender: "女" },
  { name: "王五", age: 22, gender: "男" },
  { name: "赵六", age: 24, gender: "女" },
];

以下是动态生成表格的 Jquery 代码：

// 获取表格元素
var table = $("#myTable");

// 表头
table.append("<thead><tr><th>姓名</th><th>年龄</th><th>性别</th></tr></thead>");

// 表格内容
var tbody = $("<tbody></tbody>");
for (var i = 0; i < data.length; i++) {
  var tr = $("<tr></tr>");
  tr.append("<td>" + data[i].name + "</td>");
  tr.append("<td>" + data[i].age + "</td>");
  tr.append("<td>" + data[i].gender + "</td>");
  tbody.append(tr);
}

// 将表格内容添加到表格中
table.append(tbody);

代码说明：

1. 首先通过 Jquery 的选择器获取到了表格的元素，并赋值给变量 table
2. 使用 append 方法向表格添加表头，表头结构与静态表格一致
3. 创建一个新的 tbody 元素
4. 使用 for 循环遍历数据，创建每一行的 tr 元素，并在其中添加 td 元素描述单元格的内容
5. 将每一行的 tr 元素添加到 tbody 元素中
6. 最后将 tbody 元素添加到表格中

至此，你已经掌握了 Jquery 动态生成表格的基本方法，可以根据自己的需求进行更加复杂的操作。