表格是网页中常用的展示数据的方式，而有时我们需要让用户能够通过表格编辑数据，就需要用到可编辑表格。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怎么实现可编辑表格的详细内容。