jquery table动态展示后台数据
时间: 2023-08-05 17:09:03 浏览: 86
您好,可以通过使用jQuery和Ajax从后台获取数据,然后将数据动态展示在表格中。下面是一个简单的示例:
HTML代码:
```html
<table id="myTable">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
```
JavaScript代码:
```javascript
$(document).ready(function() {
// 使用Ajax从后台获取数据
$.ajax({
url: 'your-backend-url',
type: 'GET',
dataType: 'json',
success: function(data) {
// 遍历数据,生成表格行
$.each(data, function(index, item) {
// 创建表格行
var row = $('<tr></tr>');
// 添加单元格
row.append($('<td></td>').text(item.name));
row.append($('<td></td>').text(item.age));
row.append($('<td></td>').text(item.gender));
// 将表格行添加到表格中
$('#myTable tbody').append(row);
});
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(textStatus, errorThrown);
}
});
});
```
其中,需要根据后台接口的具体情况,设置url、type和dataType等参数。在success回调函数中,使用$.each遍历从后台获取的数据,然后根据数据生成表格行,并将行添加到表格中。最终,表格会动态展示后台数据。
相关推荐



假设你要把 AJAX 请求返回的 JSON 数据以表格形式展示在 JSP 页面上,可以先在页面中添加一个表格:
html
姓名
年龄
性别
然后,在 AJAX 请求成功后,遍历 JSON 数据,生成表格的每一行:
javascript
$.ajax({
url: 'your_url',
dataType: 'json',
success: function(data) {
var table = $('#infoTable tbody');
$.each(data, function(index, obj) {
var tr = $(' ');
tr.append('' + obj.name + ' ');
tr.append('' + obj.age + ' ');
tr.append('' + obj.sex + ' ');
table.append(tr);
});
}
});
在每一次$.each()遍历时,都动态创建一个元素,然后把人员信息的每个属性都添加到这个 元素中,最后把这个 元素添加到表格中即可。
注意,这里假设你使用了 jQuery 库,如果没有引入 jQuery 库,可以换成原生 JS 操作 DOM 元素的方式来实现。
";
}
html += "";
$("#userList").html(html);
}
});
});
</script>
</html>
注意:以上代码仅作为示例,实际业务中需要根据需求进行修改。





这里提供一个基于jQuery和PHP的例子:
HTML代码:
html
编号
姓名
年龄
邮箱
操作
1
张三
20
zhangsan@example.com
编辑
2
李四
25
lisi@example.com
编辑
3
王五
30
wangwu@example.com
编辑
编辑信息
<form>
<input type="hidden" name="id">
姓名:<input type="text" name="name">
年龄:<input type="text" name="age">
邮箱:<input type="text" name="email">
<button type="submit">提交</button> <button type="button" class="cancel-btn">取消</button>
</form>
JS代码:
javascript
$(function() {
// 点击编辑按钮弹出编辑窗口
$('#grid').on('click', '.edit-btn', function() {
var tr = $(this).closest('tr');
$('#edit-form input[name="id"]').val(tr.find('td:eq(0)').text());
$('#edit-form input[name="name"]').val(tr.find('td:eq(1)').text());
$('#edit-form input[name="age"]').val(tr.find('td:eq(2)').text());
$('#edit-form input[name="email"]').val(tr.find('td:eq(3)').text());
$('#edit-form').show();
});
// 点击取消按钮关闭编辑窗口
$('#edit-form').on('click', '.cancel-btn', function() {
$(this).closest('#edit-form').hide();
});
// 提交表单,保存修改
$('#edit-form form').on('submit', function(event) {
event.preventDefault();
var postData = $(this).serialize();
$.post('save.php', postData, function(response) {
if (response.success) {
// 修改成功,更新表格数据
var tr = $('#grid').find('tr:contains(' + response.data.id + ')');
tr.find('td:eq(1)').text(response.data.name);
tr.find('td:eq(2)').text(response.data.age);
tr.find('td:eq(3)').text(response.data.email);
$('#edit-form').hide();
} else {
alert(response.message);
}
}, 'json');
});
});
PHP代码(save.php):
php
<?php
// 模拟修改数据的后台代码
$id = $_POST['id'];
$name = $_POST['name'];
$age = $_POST['age'];
$email = $_POST['email'];
// 保存修改后的数据
// 这部分代码根据具体需求自行修改
$data = [
'id' => $id,
'name' => $name,
'age' => $age,
'email' => $email,
];
// 返回结果给前端
$response = [
'success' => true,
'data' => $data,
'message' => '修改成功!'
];
echo json_encode($response);
以上代码演示了一个简单的表格数据修改操作,当用户点击某行数据的“编辑”按钮时,会弹出一个编辑表单,用户可以在表单中修改数据并提交保存。后台收到修改请求后,更新相应的数据并返回结果给前端。前端根据返回的结果更新表格数据,并关闭编辑表单。这个例子实现比较基础,但可以通过类似的方式扩展和优化。








好的,以下是一个简单的后台管理页面的HTML代码,包括了用户管理、权限管理、数据统计和系统配置四个模块,您可以根据需要进行修改和优化。
html
<!DOCTYPE html>
<html>
<head>
<title>后台管理页面</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
后台管理系统
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
</button>
用户管理
权限管理
数据统计
系统配置
用户管理
用户名
邮箱
角色
操作
张三
zhangsan@example.com
管理员
<button type="button" class="btn btn-primary">编辑</button>
<button type="button" class="btn btn-danger">删除</button>
李四
lisi@example.com
普通用户
<button type="button" class="btn btn-primary">编辑</button>
<button type="button" class="btn btn-danger">删除</button>
权限管理
权限名称
权限描述
操作
用户管理
管理用户的权限
<button type="button" class="btn btn-primary">编辑</button>
<button type="button" class="btn btn-danger">删除</button>
权限管理
管理权限的权限
<button type="button" class="btn btn-primary">编辑</button>
<button type="button" class="btn btn-danger">删除</button>
数据统计
用户数量
1000
订单数量
5000
销售额
1000000元
系统配置
<form>
<label for="email">邮箱地址:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
<label for="pwd">密码:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="remember"> 记住我
</label>
<button type="submit" class="btn btn-primary">保存</button>
</form>
</body>
</html>
上述代码使用了Bootstrap框架,包括了导航栏、表格、卡片和表单等组件,可以快速搭建一个简单的后台管理页面。