js可编辑的表格
时间: 2023-08-06 07:04:10 浏览: 86
你可以使用HTML中的表格元素(table、tr、td等)来创建一个表格,然后使用JavaScript来使其可编辑。以下是一个简单的例子:
HTML代码:
```html
<table id="myTable">
<tr>
<td contenteditable="true">Edit Me</td>
<td contenteditable="true">Edit Me Too</td>
</tr>
<tr>
<td contenteditable="true">Edit Me Again</td>
<td contenteditable="true">And Me</td>
</tr>
</table>
```
JavaScript代码:
```javascript
var table = document.getElementById("myTable");
var cells = table.getElementsByTagName("td");
for (var i = 0; i < cells.length; i++) {
cells[i].addEventListener("blur", function(){
//保存表格内容
localStorage.setItem(this.id, this.innerHTML);
});
if (localStorage.getItem(cells[i].id)) {
cells[i].innerHTML = localStorage.getItem(cells[i].id);
}
}
```
这个例子中,我们给每个表格单元格添加了`contenteditable`属性,使其可编辑。然后,我们使用JavaScript来监听每个单元格的`blur`事件,当单元格失去焦点时,我们将其内容保存到`localStorage`中。在页面加载时,我们检查每个单元格是否已经有内容保存在`localStorage`中,如果有,则将其内容恢复。
阅读全文