,可以通过以下步骤实现:
<table>
<tr id="row1">
<td>数据1</td>
<td>数据2</td>
<td><button onclick="deleteData('row1')">删除</button></td>
</tr>
<tr id="row2">
<td>数据3</td>
<td>数据4</td>
<td><button onclick="deleteData('row2')">删除</button></td>
</tr>
<!-- 其他行... -->
</table>
deleteData()
,该函数将通过AJAX请求将要删除的行的标识符发送到后端PHP脚本。function deleteData(rowId) {
// 发送AJAX请求
var xhr = new XMLHttpRequest();
xhr.open('POST', 'delete.php', true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 处理响应
var response = JSON.parse(xhr.responseText);
if (response.success) {
// 删除成功,更新前端表格
var row = document.getElementById(rowId);
row.parentNode.removeChild(row);
} else {
// 删除失败,显示错误消息
alert(response.message);
}
}
};
xhr.send('rowId=' + encodeURIComponent(rowId));
}
delete.php
的PHP脚本,用于处理删除请求并更新JSON数据。<?php
// 从请求中获取要删除的行的标识符
$rowId = $_POST['rowId'];
// 读取JSON数据文件
$jsonData = file_get_contents('data.json');
$data = json_decode($jsonData, true);
// 查找并删除对应的行
foreach ($data as $key => $row) {
if ($row['id'] === $rowId) {
unset($data[$key]);
break;
}
}
// 重新索引数组键值
$data = array_values($data);
// 将更新后的数据写回JSON文件
file_put_contents('data.json', json_encode($data));
// 返回成功响应
$response = array('success' => true);
echo json_encode($response);
?>
以上代码假设存在一个名为data.json
的JSON数据文件,其中包含要删除的行的数据。在PHP脚本中,我们使用file_get_contents()
函数读取JSON数据文件,然后使用json_decode()
函数将其解码为PHP数组。接下来,我们遍历数组,找到要删除的行,并使用unset()
函数将其从数组中删除。最后,我们使用array_values()
函数重新索引数组键值,并使用file_put_contents()
函数将更新后的数据写回JSON文件。
这样,当用户单击HTML表中的删除按钮时,JavaScript函数将发送AJAX请求到后端PHP脚本,后端脚本将删除对应的行,并返回一个成功响应。前端JavaScript函数在接收到成功响应后,将更新前端表格,删除对应的行。
推荐的腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云