这里提供一个基于jQuery和PHP的例子：
HTML代码：
```html
<!--
表格-->
<table id="grid">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>邮箱</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>20</td>
<td>zhangsan@example.com</td>
<td><a href="javascript:void(0);" class="edit-btn">编辑</a></td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>25</td>
<td>lisi@example.com</td>
<td><a href="javascript:void(0);" class="edit-btn">编辑</a></td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>30</td>
<td>wangwu@example.com</td>
<td><a href="javascript:void(0);" class="edit-btn">编辑</a></td>
</tr>
</tbody>
</table>
<!--编辑
表单-->
<div id="edit-form" style="display:none;">
<h3>编辑信息</h3>
<form>
<input type="hidden" name="id">
<p>姓名：<input type="text" name="name"></p>
<p>年龄：<input type="text" name="age"></p>
<p>邮箱：<input type="text" name="email"></p>
<p><button type="submit">
提交</button> <button type="button" class="cancel-btn">取消</button></p>
</form>
</div>
```
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);
```
以上代码演示了一个简单的
表格数据修改操作，当用户点击某行
数据的“编辑”
按钮时，会弹出一个编辑
表单，用户可以在
表单中修改
数据并
提交保存。
后台收到修改请求后，更新相应的
数据并返回结果给前端。前端根据返回的结果更新
表格数据，并关闭编辑
表单。这个例子实现比较基础，但可以通过类似的方式扩展和优化。
最低0.47元/天 解锁文章
1237
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
