jquery 动态渲染表格
时间: 2023-08-27 16:06:55 浏览: 71
jQuery 可以通过操作 DOM 元素来动态渲染表格。以下是一个简单的例子:
HTML 代码:
```html
<table id="myTable">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
</thead>
<tbody></tbody>
</table>
```
JavaScript 代码:
```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)` 将行元素添加到表格中。