前言
表格是網頁中常用的展示數據的方式,而有時我們需要讓使用者能夠透過表格編輯數據,就需要用到可編輯表格。 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;
建立一個名為"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>
最後,我們需要寫一個名為"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中文網其他相關文章!