jquery 动态渲染表格

jQuery 可以通过操作 DOM 元素来动态渲染表格。以下是一个简单的例子：

HTML 代码：

<table id="myTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Gender</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

JavaScript 代码：

// 模拟数据
var data = [
  { name: 'John', age: 25, gender: 'Male' },
  { name: 'Mary', age: 30, gender: 'Female' },
  { name: 'Tom', age: 35, gender: 'Male' }
];

// 动态生成表格
$.each(data, function(index, item) {
  var tr = $('<tr>');
  tr.append($('<td>').text(item.name));
  tr.append($('<td>').text(item.age));
  tr.append($('<td>').text(item.gender));
  $('#myTable tbody').append(tr);
});

这段代码会根据模拟数据动态生成一个包含三行数据的表格。其中 `$.each()` 函数用于遍历数据，`$('<tr>')` 创建一个新的行元素，`$('<td>')` 创建一个新的单元格元素，`.text()` 方法用于设置文本内容，`.append()` 方法用于将单元格元素添加到行元素中，最后使用 `$('#myTable tbody').append(tr)` 将行元素添加到表格中。