用jq代码写生成表格就是将数据添加到页面的表格元素中,主要的实现思路是点击获取数据按钮,根据data这个数组里面的数据来给tbody追加tr。
时间: 2024-02-15 14:01:19 浏览: 189
jquery实现生成表格
好的,以下是使用 jQuery 实现生成表格的代码示例:
HTML 代码:
```html
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<button id="get-data-btn">获取数据</button>
```
JavaScript 代码:
```javascript
$(function() {
// 定义表格数据数组
var data = [
{ name: '张三', age: 20, gender: '男' },
{ name: '李四', age: 22, gender: '女' },
{ name: '王五', age: 25, gender: '男' }
];
// 监听获取数据按钮的点击事件
$('#get-data-btn').click(function() {
// 获取表格的 tbody 元素
var tbody = $('table tbody');
// 遍历表格数据数组中的每一项
for (var i = 0; i < data.length; i++) {
// 创建新的表格行
var tr = $('<tr></tr>');
// 依次添加对应的单元格
tr.append($('<td></td>').text(data[i].name));
tr.append($('<td></td>').text(data[i].age));
tr.append($('<td></td>').text(data[i].gender));
// 将新的表格行添加到 tbody 元素中
tbody.append(tr);
}
});
});
```
在上面的示例代码中,我们使用 `$()` 函数来获取相应的元素,并使用 `click()` 方法来监听按钮的点击事件。在点击按钮后,我们遍历表格数据数组中的每一项,创建新的表格行,并依次添加对应的单元格。最后,将新的表格行添加到表格的 `<tbody>` 元素中。需要注意的是,在使用 jQuery 操作表格元素时,需要使用 jQuery 提供的方法和属性来访问和操作元素。
阅读全文