要实现创建一个可编辑的表格，并且能够保存数据至服务器 并在下次打开页面时显示之前修改的数据的完整代码
时间: 2024-03-24 20:36:56 浏览: 23
好的，这里提供一个使用 HTML、CSS、JavaScript 和 PHP 实现创建可编辑表格、保存数据至服务器、读取和显示数据的完整代码，代码注释比较详细，你可以参考以下代码进行实现：
HTML 代码：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>可编辑表格</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
.editable {
background-color: #eee;
cursor: pointer;
}
.editable:hover {
background-color: #ddd;
}
</style>
</head>
<body>
<h1>可编辑表格</h1>
<table id="myTable">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- 这里通过 PHP 代码动态输出表格的数据 -->
<?php
require_once('config.php');
$conn = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME);
if ($conn->connect_error) {
die("连接失败: " . $conn->connect_error);
}
$sql = "SELECT * FROM mytable";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// 输出数据
while($row = $result->fetch_assoc()) {
echo '<tr>';
echo '<td class="editable" contenteditable="true">' . $row["name"] . '</td>';
echo '<td class="editable" contenteditable="true">' . $row["age"] . '</td>';
echo '<td class="editable" contenteditable="true">' . $row["gender"] . '</td>';
echo '<td><button onclick="saveData(this)">保存</button></td>';
echo '</tr>';
}
} else {
echo '<tr><td colspan="4">暂无数据</td></tr>';
}
$conn->close();
?>
</tbody>
</table>
<script>
// 保存数据到服务器
function saveData(button) {
// 获取当前行的数据
const row = button.parentNode.parentNode;
const name = row.cells[0].textContent;
const age = row.cells[1].textContent;
const gender = row.cells[2].textContent;
const data = {
'name': name,
'age': age,
'gender': gender
};
// 使用 AJAX 技术将数据发送到服务器进行保存
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
alert(xhr.responseText);
}
};
xhr.open('POST', 'save.php', true);
xhr.setRequestHeader('Content-type', 'application/json');
xhr.send(JSON.stringify(data));
}
</script>
</body>
</html>
```
CSS 代码：
```css
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
.editable {
background-color: #eee;
cursor: pointer;
}
.editable:hover {
background-color: #ddd;
}
```
JavaScript 代码：
```javascript
// 添加可编辑功能
const cells = document.querySelectorAll('.editable');
cells.forEach(function(cell) {
cell.addEventListener('click', function() {
this.classList.add('edit');
});
cell.addEventListener('blur', function() {
this.classList.remove('edit');
});
});
// 使用 AJAX 技术从服务器加载数据
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
// 将服务器返回的数据填充到表格中
const data = JSON.parse(xhr.responseText);
const tbody = document.querySelector('tbody');
tbody.innerHTML = '';
data.forEach(function(item) {
const tr = document.createElement('tr');
tr.innerHTML = '<td class="editable" contenteditable="true">' + item.name + '</td>' +
'<td class="editable" contenteditable="true">' + item.age + '</td>' +
'<td class="editable" contenteditable="true">' + item.gender + '</td>' +
'<td><button onclick="saveData(this)">保存</button></td>';
tbody.appendChild(tr);
});
}
};
xhr.open('GET', 'load.php', true);
xhr.send();
```
PHP 代码（保存数据）：
```php
<?php
require_once('config.php');
$data = json_decode(file_get_contents('php://input'), true);
$name = $data['name'];
$age = $data['age'];
$gender = $data['gender'];
$conn = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME);
if ($conn->connect_error) {
die("连接失败: " . $conn->connect_error);
}
$sql = "INSERT INTO mytable (name, age, gender) VALUES ('$name', '$age', '$gender')";
if ($conn->query($sql) === TRUE) {
echo "保存成功";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
$conn->close();
?>
```
PHP 代码（读取数据）：
```php
<?php
require_once('config.php');
$conn = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME);
if ($conn->connect_error) {
die("连接失败: " . $conn->connect_error);
}
$sql = "SELECT * FROM mytable";
$result = $conn->query($sql);
$data = array();
if ($result->num_rows > 0) {
// 将查询结果转换为数组
while($row = $result->fetch_assoc()) {
array_push($data, $row);
}
}
echo json_encode($data); // 将数组转换为 JSON 格式并输出
$conn->close();
?>
```
这段代码中，使用了 MySQL 数据库进行数据的储存，需要在 `config.php` 文件中配置数据库的相关信息，例如：
```php
define('DB_HOST', 'localhost');
define('DB_USER', 'root');
define('DB_PASS', '123456');
define('DB_NAME', 'mydatabase');
```
这样，就完成了一个简单的可编辑表格，并且能够保存数据至服务器、读取和显示数据的实现。
相关推荐
最新推荐
JS实现动态生成表格并提交表格数据向后端
先来看一下需求：在web页面上动态的生成表格，并可以对表格中的数据进行编辑，然后把表格中的数据提交至后端服务器保存。 那么我们首先需要解决的是动态生成表格的问题 1.首先我们需要导入JS库文件。 [removed]...
JS实现table表格数据排序功能(可支持动态数据+分页效果)
我写了一个简单的Demo排序. 数据就是字母和数字两组.(汉字需要找到asc码) 原理就是利用数组自带的sort排序,进行表格重组.已在.net mvc 中测试过.支持分页.(申明一点.只对当前页面数据排序 无刷新,对所有页面排序的话...
Layui实现数据表格默认全部显示(不要分页)
今天小编就为大家分享一篇Layui实现数据表格默认全部显示(不要分页)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
LayUi中接口传数据成功,表格不显示数据的解决方法
若传过来的 Json 包含这四个参数，且参数名一样，则表格读数据不会出问题。若参数名和上述的不一样，则需要转换下，具体方法如下： response:{ statusName: '自定义的参数名称' ,// 对应 code msgName: '自定义的...
Android studio listview实现列表数据显示 数据循环显示效果
主要介绍了Android studio listview实现列表数据显示 数据循环显示功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
zigbee-cluster-library-specification
最新的zigbee-cluster-library-specification说明文档。
管理建模和仿真的文件
管理Boualem Benatallah引用此版本：布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学，1996年。法语。NNT：电话：00345357HAL ID：电话：00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆，用于存放和传播科学研究论文，无论它们是否被公开。论文可以来自法国或国外的教学和研究机构，也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
MATLAB遗传算法自动优化指南：解放算法调优，提升效率
# 1. MATLAB遗传算法概述**
遗传算法是一种受生物进化启发的优化算法，它模拟了自然选择和遗传的过程。在MATLAB中，遗传算法工具箱提供了丰富的函数和类，用于创建和运行遗传算法。
**1.1 遗传算法的基本原理**
遗传算法的工作原理如下：
- **初始化：**创建由随机个体组成的初始种群。
- **评估：**根据目标函数计算每个个体的适应度。
-
failed to register layer: ApplyLayer exit status 1 stdout: stderr: archive/tar: invalid tar header
很抱歉听到这个问题。这个错误通常是由于Docker镜像损坏或Docker存储库中缺少所需的图层引起的。您可以尝试以下几种方法来解决这个问题：
1. 清理Docker镜像和容器：使用命令“docker system prune”清理不再使用的Docker对象。
2. 检查Docker存储库：确保您正在使用可靠的Docker存储库，并检查是否存在所有必需的图层。
3. 重新下载Docker镜像：如果您确定问题是由于损坏的Docker镜像引起的，则可以尝试重新下载Docker镜像。
4. 更新Docker版本：如果您使用的是旧版Docker，则可能会出现此问题。尝试更新到最新版本的Docke
JSBSim Reference Manual
JSBSim参考手册，其中包含JSBSim简介，JSBSim配置文件xml的编写语法，编程手册以及一些应用实例等。其中有部分内容还没有写完，估计有生之年很难看到完整版了，但是内容还是很有参考价值的。