HTML 创建一个可编辑的表格,每行表格增加一个确认按钮,点击确认按钮将本行单元格数据分别传递给数据库,使用Python 使用服务器端语言来解析 JSON 数据并将其存储到数据库中。
时间: 2024-05-05 11:21:51 浏览: 89
首先,我们可以使用 HTML 和 JavaScript 来创建可编辑的表格,并添加确认按钮。代码如下所示:
```html
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
<th>Confirm</th>
</tr>
</thead>
<tbody>
<tr>
<td contenteditable="true">1</td>
<td contenteditable="true">John</td>
<td contenteditable="true">30</td>
<td><button onclick="saveRowData(this)">Confirm</button></td>
</tr>
<tr>
<td contenteditable="true">2</td>
<td contenteditable="true">Jane</td>
<td contenteditable="true">25</td>
<td><button onclick="saveRowData(this)">Confirm</button></td>
</tr>
</tbody>
</table>
<script>
function saveRowData(button) {
var row = button.parentNode.parentNode;
var id = row.cells[0].textContent;
var name = row.cells[1].textContent;
var age = row.cells[2].textContent;
var data = {id: id, name: name, age: age};
sendDataToServer(data);
}
function sendDataToServer(data) {
var xhr = new XMLHttpRequest();
xhr.open("POST", "/save_data", true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify(data));
}
</script>
```
这个表格包含了一个可编辑的表格和一个确认按钮。当用户点击确认按钮时,它会调用 `saveRowData` 函数,该函数会获取该行的单元格数据,并将其封装成一个 JSON 对象,然后调用 `sendDataToServer` 函数将数据发送到服务器。
在服务器端,我们可以使用 Python 和 Flask 框架来解析 JSON 数据,并将其存储到数据库中。代码如下所示:
```python
from flask import Flask, request
import json
import sqlite3
app = Flask(__name__)
@app.route('/save_data', methods=['POST'])
def save_data():
data = json.loads(request.data)
conn = sqlite3.connect('database.db')
cursor = conn.cursor()
cursor.execute("INSERT INTO users (id, name, age) VALUES (?, ?, ?)", (data['id'], data['name'], data['age']))
conn.commit()
conn.close()
return 'OK'
if __name__ == '__main__':
app.run()
```
这个代码将会创建一个 Flask 应用程序,它会监听 `/save_data` 路径的 POST 请求。当有请求时,它会使用 `json.loads()` 函数将请求体中的 JSON 数据解析为 Python 字典,并将数据插入到 SQLite 数据库中。为了简单起见,我们假设数据库中已经创建了一个名为 `users` 的表格,包含三个字段:`id`、`name` 和 `age`。
这样,当用户在前端编辑表格并点击确认按钮时,它会将数据发送到服务器端,服务器端会将数据存储到数据库中。
阅读全文