给我写一个页面表格编辑并保存道本地的html
时间: 2023-12-19 07:07:41 浏览: 25
<!DOCTYPE html>
<html>
<head>
<title>表格编辑器</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<h1>表格编辑器</h1>
<p>在下面的表格中编辑内容,点击“保存”按钮将内容保存到本地。</p>
<table id="myTable">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td contenteditable="true">小明</td>
<td contenteditable="true">18</td>
<td contenteditable="true">男</td>
</tr>
<tr>
<td contenteditable="true">小红</td>
<td contenteditable="true">20</td>
<td contenteditable="true">女</td>
</tr>
<tr>
<td contenteditable="true">小刚</td>
<td contenteditable="true">22</td>
<td contenteditable="true">男</td>
</tr>
</tbody>
</table>
<br>
<button onclick="saveTable()">保存</button>
<script>
function saveTable() {
// 获取表格内容
var table = document.getElementById("myTable");
var tableContent = table.innerHTML;
// 创建一个新的 Blob 对象
var blob = new Blob([tableContent], {type: "text/plain;charset=utf-8"});
// 创建一个 <a> 标签
var a = document.createElement("a");
a.href = URL.createObjectURL(blob);
a.download = "myTable.html";
// 将 <a> 标签添加到文档中
document.body.appendChild(a);
// 模拟点击 <a> 标签
a.click();
// 移除 <a> 标签
document.body.removeChild(a);
}
</script>
</body>
</html>