在网页开发中，表格是非常常用的一种元素。在表格中，我们经常需要对其中的数据进行修改，通常的方式是通过后端处理来更新数据。但是如果我们希望在前端实时直接修改表格数据，该怎么实现呢？本文将介绍在 php 和 html 页面中，如何通过 ajax 技术实现表格数据实时修改。
一、概述
在本文中，我们将通过一个简单的表格实现实时修改的例子来说明。首先，我们需要用 PHP 代码生成一个表格。如下所示：
<!DOCTYPE html>
<html>
<head>
<title>Table Example</title>
<meta charset="utf-8">
</head>
<body>
<?php
$data = array(
array("姓名","性别","年龄"),
array("张三","男","20"),
array("李四","女","22"),
array("王五","男","21")
);
?>
<table border="1" cellpadding="5">
<?php
foreach($data as $row) {
echo "<tr>";
foreach($row as $cell) {
echo "<td>$cell</td>";
}
echo "</tr>";
}
?>
</table>
</body>
</html>上述代码生成了一个简单的表格，其中包含了四个人的姓名、性别和年龄信息。在 PHP 中，我们可以使用数组来表示表格中的数据。
二、实时修改表格数据
立即学习“PHP免费学习笔记（深入）”；
现在，我们要实现的是实时修改表格中的数据。我们可以通过以下步骤来实现：
- 在表格中增加一个修改按钮。
在每一行的数据最后一列，增加一个按钮，用于修改该行数据。使用以下代码：
foreach($data as $row) {
echo "<tr>";
foreach($row as $i => $cell) {
if($i==count($row)-1) {
echo "<td><button onclick='editRow(event)'>修改</button></td>";
}
else {
echo "<td>$cell</td>";
}
}
echo "</tr>";
}这里使用了一个 JavaScript 函数 editRow，用于在点击修改按钮时调用。
- 编写 JavaScript 函数
editRow。
在 HTML 页面中增加如下 JavaScript 代码：
<script>
function editRow(event) {
// 获取当前点击按钮所在行以及行内的数据
var row = event.target.parentNode.parentNode;
var cells = row.getElementsByTagName("td");
var data = [];
for(var i=0;i<cells.length-1;i++) {
data.push(cells[i].innerText);
}
// 将数据填入表单中
var form = "<form>";
form += "<input type='hidden' name='row' value='"+row.rowIndex+"'>";
form += "<input type='text' name='name' value='"+data[0]+"'>";
form += "<input type='text' name='gender' value='"+data[1]+"'>";
form += "<input type='text' name='age' value='"+data[2]+"'>";
form += "<button type='button' onclick='saveChanges(event)'>保存</button>";
form += "</form>";
// 将表单替换为数据输入框
row.innerHTML = form;
}
</script>这里定义了一个函数 editRow，在点击修改按钮时，该函数会将当前行的数据显示为一个表单，方便用户修改。
- 编写 JavaScript 函数
saveChanges。
在表单中输入完数据后，我们需要将修改的数据通过 AJAX 技术发送给服务器并更新表格。现在，我们需要编写 JavaScript 函数 saveChanges，用于保存修改后的数据。该函数使用以下代码：
<script>
function saveChanges(event) {
// 获取当前修改的数据
var form = event.target.parentNode;
var rowIndex = form.row.value;
var name = form.name.value;
var gender = form.gender.value;
var age = form.age.value;
var data = "rowIndex="+rowIndex+"&name="+name+"&gender="+gender+"&age="+age;
// 发送 AJAX 请求
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState==4 && xmlhttp.status==200) {
// 更新表格数据
var row = form.parentNode;
row.innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("POST","update.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send(data);
}
</script>该函数通过 XMLHttpRequest 对象发送一个 POST 请求到服务器的 update.php 页面，用于处理表格数据的更新操作。在服务器端处理完数据更新后，会返回新的表格数据，通过 xmlhttp.responseText 获取到并更新表格数据。
- 编写服务端代码
在服务器端，我们需要编写一个 update.php 的页面，用于处理表格数据的更新操作。该页面代码如下：
<?php
// 获取 POST 数据
$rowIndex = $_POST["rowIndex"];
$name = $_POST["name"];
$gender = $_POST["gender"];
$age = $_POST["age"];
// 将新的数据返回给客户端
$data = array(
array("姓名","性别","年龄"),
array($name,$gender,$age)
);
$table = "<table border='1' cellpadding='5'>";
foreach($data as $row) {
$table .= "<tr>";
foreach($row as $cell) {
$table .= "<td>$cell</td>";
}
$table .= "</tr>";
}
$table .= "</table>";
echo $table;
?>该页面接收客户端通过 POST 方式传递来的修改数据，然后进行数据更新操作，并将更新后的数据返回给客户端。
现在，我们已经完成了整个表格实时修改的过程。在浏览器中打开页面，点击修改按钮，在弹出的输入框中输入修改后的数据，点击保存按钮即可看到数据更新的效果。
三、总结
本文介绍了在 PHP 和 HTML 页面中，如何通过 AJAX 技术实现表格数据实时修改的方法。其中，我们使用 PHP 生成一个简单的表格，使用 JavaScript 实现了表格数据的实时修改，并通过 AJAX 将修改后的数据发送到服务器端进行处理。该方法可以帮助我们更加方便和快捷地操作表格数据。但是需要注意的是，在实际开发中，为了保证数据的安全性和正确性，我们需要对接收到的数据进行严格校验和过滤，防止恶意攻击和数据误操作。
