编写前端 HTML 及 JS 代码进行数据库信息的显示及删除
时间: 2024-03-16 19:45:35 浏览: 27
好的,我可以为您提供一些思路和代码示例。
首先,需要在前端页面中创建一个表格,用于显示数据库中的信息。然后,使用 JavaScript 代码从后端获取数据,并将数据填充到表格中。最后,为每一行数据添加删除按钮,点击按钮时可以从数据库中删除对应的数据。
以下是一个简单的示例代码:
HTML 代码:
```html
<table id="myTable">
<tr>
<th>ID</th>
<th>Name</th>
<th>Action</th>
</tr>
</table>
```
JavaScript 代码:
```javascript
// 获取表格元素
var table = document.getElementById("myTable");
// 从后端获取数据
fetch("/api/data")
.then(response => response.json())
.then(data => {
// 填充数据到表格中
data.forEach(item => {
var row = table.insertRow();
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = item.id;
cell2.innerHTML = item.name;
cell3.innerHTML = "<button onclick='deleteData(" + item.id + ")'>Delete</button>";
});
});
// 删除数据
function deleteData(id) {
fetch("/api/delete?id=" + id, { method: "DELETE" })
.then(response => {
if (response.ok) {
// 从表格中删除对应的行
var rowIndex = document.getElementById("myTable").rows.namedItem("row_" + id).rowIndex;
document.getElementById("myTable").deleteRow(rowIndex);
} else {
alert("Failed to delete data.");
}
});
}
```
在上面的示例代码中,我们使用了 fetch API 来从后端获取数据和删除数据。在删除数据时,我们使用了 DELETE 方法,并且根据返回的响应状态码来判断是否删除成功。当删除成功后,我们从表格中删除对应的行。
当然,上述代码仅为示例,具体实现还需要根据具体的后端和数据库进行调整。