要实现创建一个可编辑的表格,并且能够保存数据并在下次打开页面时显示之前修改的数据的完整代码
时间: 2024-03-24 20:36:48 浏览: 68
好的,下面是一个简单的示例代码,可以创建一个可编辑的表格,并在本地存储中保存数据。当下次打开页面时,将会自动加载之前保存的数据:
HTML代码:
```html
<table id="myTable">
<thead>
<tr>
<th>名称</th>
<th>数量</th>
<th>价格</th>
</tr>
</thead>
<tbody>
<tr>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
</tr>
</tbody>
</table>
```
JavaScript代码:
```javascript
// 获取表格元素
const table = document.getElementById("myTable");
// 获取表格行元素
const rows = table.getElementsByTagName("tr");
// 读取本地存储中保存的数据
const savedData = JSON.parse(localStorage.getItem("tableData"));
// 如果本地存储中有数据,则更新表格中的内容
if (savedData) {
for (let i = 0; i < rows.length; i++) {
const cells = rows[i].getElementsByTagName("td");
for (let j = 0; j < cells.length; j++) {
cells[j].innerText = savedData[i][j];
}
}
}
// 监听表格内容的修改事件
table.addEventListener("input", () => {
const data = [];
for (let i = 0; i < rows.length; i++) {
const cells = rows[i].getElementsByTagName("td");
const rowData = [];
for (let j = 0; j < cells.length; j++) {
rowData.push(cells[j].innerText);
}
data.push(rowData);
}
// 将数据保存到本地存储中
localStorage.setItem("tableData", JSON.stringify(data));
});
```
这段代码使用了HTML5中的`contenteditable`属性,使表格单元格可编辑。同时,它还使用了`localStorage`API,可以在本地存储中保存数据。当用户修改表格内容时,代码会将数据存储到本地存储中,并在下次打开页面时自动加载之前保存的数据。
阅读全文