前言
表格是網頁中常用的展示數據的方式，而有時我們需要讓使用者能夠透過表格編輯數據，就需要用到可編輯表格。 php作為一種伺服器端腳本語言，可以對錶格進行操作，並且與ajax搭配使用，可以實現異步更新數據，不必重新加載整個網頁。在這篇文章中，我們將介紹如何用php和ajax實作可編輯表格。
實作步驟
- 建立資料庫和資料表
#首先，在mysql資料庫中建立一個名為"editable_table"的資料庫，然後建立一個名為"users"的資料表，用於儲存使用者資訊。表格的結構如下：
CREATE TABLE `users` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(50) NOT NULL,
`email` varchar(50) NOT NULL,
`phone` varchar(20) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
登入後複製
- 建立php檔案
建立一個名為"table.php"的php文件，用於從資料庫中讀取使用者信息，並將其以表格的形式展示在網頁上。程式碼如下：
<?php
// 连接数据库
$conn = mysqli_connect('localhost', 'root', 'password', 'editable_table');
if (!$conn) {
die('连接数据库失败: ' . mysqli_connect_error());
}
// 查询数据库，获取用户信息
$sql = "SELECT * FROM users";
$result = mysqli_query($conn, $sql);
// 输出表格
echo "<table><thead><tr><th>ID</th><th>姓名</th><th>邮箱</th><th>电话</th></tr></thead><tbody>";
while ($row = mysqli_fetch_assoc($result)) {
echo "<tr><td>" . $row['id'] . "</td><td>" . $row['name'] . "</td><td>" . $row['email'] . "</td><td>" . $row['phone'] . "</td></tr>";
}
echo "</tbody></table>";
// 关闭数据库连接
mysqli_close($conn);
?>登入後複製
- 新增可編輯功能
現在我們已經可以在網頁中展示使用者資訊了，但我們希望使用者能夠透過表格編輯資料。為了實現這個功能，我們需要加入一些javascript程式碼。
首先，我們需要新增一個"contenteditable"屬性，用於將表格單元格變成可編輯狀態。此外，我們還需要新增一個事件監聽器，用於當儲存格中的內容被修改時，將修改的資料傳送到伺服器端。
程式碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>可编辑表格</title>
</head>
<body>
<div id="table-container"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
// 读取数据表并将其展示在网页上
function loadTable() {
$.ajax({
url: 'table.php',
type: 'GET',
success: function(result) {
$('#table-container').html(result);
}
});
}
// 点击单元格时，将它设为可编辑状态
$(document).on('click', 'td[contenteditable=false]', function() {
$(this).attr('contenteditable', true);
$(this).addClass('editable-cell');
$(this).focus();
});
// 当修改单元格中的内容时，将修改的数据发送到服务器端
$(document).on('blur', 'td[contenteditable=true]', function() {
var row = $(this).parent();
var id = row.children().eq(0).text();
var name = row.children().eq(1).text();
var email = row.children().eq(2).text();
var phone = row.children().eq(3).text();
$.ajax({
url: 'update_table.php',
type: 'POST',
data: { id: id, name: name, email: email, phone: phone },
success: function(result) {
loadTable();
}
});
$(this).attr('contenteditable', false);
$(this).removeClass('editable-cell');
});
// 加载数据表
$(document).ready(function() {
loadTable();
});
</script>
<style>
.editable-cell {
background-color: #fff2cc;
}
</style>
</body>
</html>登入後複製
- 編寫更新資料的php檔案
最後，我們需要寫一個名為"update_table.php"的php文件，用於將新的資料更新到資料庫中。程式碼如下：
<?php
// 连接数据库
$conn = mysqli_connect('localhost', 'root', 'password', 'editable_table');
if (!$conn) {
die('连接数据库失败: ' . mysqli_connect_error());
}
// 获取POST请求中的参数
$id = $_POST['id'];
$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
// 更新数据库中的数据
$sql = "UPDATE users SET name='$name', email='$email', phone='$phone' WHERE id='$id'";
$result = mysqli_query($conn, $sql);
// 输出结果
if ($result) {
echo "修改成功";
} else {
echo "修改失败";
}
// 关闭数据库连接
mysqli_close($conn);
?>登入後複製
至此，我們已經完成了php和ajax實作可編輯表格的所有步驟，我們刷新網頁，以便實現可編輯表格的相關功能。
總結
本文中，我們介紹如何以php和ajax實作可編輯表格。透過使用"contenteditable"屬性和事件監聽器，我們可以讓表格單元格變成可編輯狀態，並且透過ajax將修改的資料上傳到伺服器端進行更新。這樣，使用者就可以方便地透過網頁編輯和保存資料了。
以上是php和ajax怎麼實作可編輯表格的詳細內容。更多資訊請關注PHP中文網其他相關文章！
