就上文代码而言 还想实现可编辑保存的功能
时间: 2024-01-08 16:02:31 浏览: 131
可用结构体保存的可编辑控件
要实现表格的可编辑保存功能,可以使用JavaScript来动态修改表格的内容,并将修改后的内容保存到后端服务器或本地存储中。下面是一个简单的示例,演示如何利用JavaScript实现表格的编辑和保存功能:
```
<!DOCTYPE html>
<html>
<head>
<title>可编辑表格示例</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #f2f2f2;
}
.editable {
background-color: #ffffcc;
}
</style>
</head>
<body>
<h1>可编辑表格示例</h1>
<table id="myTable">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td contenteditable="true" class="editable">张三</td>
<td contenteditable="true" class="editable">25</td>
<td contenteditable="true" class="editable">男</td>
</tr>
<tr>
<td contenteditable="true" class="editable">李四</td>
<td contenteditable="true" class="editable">30</td>
<td contenteditable="true" class="editable">女</td>
</tr>
</table>
<button onclick="saveTable()">保存表格</button>
<script>
function saveTable() {
var tableData = [];
var tableRows = document.getElementById("myTable").rows;
for (var i = 1; i < tableRows.length; i++) {
var rowData = [];
var tableCells = tableRows[i].cells;
for (var j = 0; j < tableCells.length; j++) {
rowData.push(tableCells[j].innerHTML);
}
tableData.push(rowData);
}
console.log(tableData);
// 这里可以将tableData发送到后端服务器或本地存储中
}
</script>
</body>
</html>
```
上面的代码中,我们给每个可编辑单元格添加了`contenteditable="true"`属性,并为其添加了一个CSS类名`editable`,用于区分可编辑单元格和非可编辑单元格。我们还添加了一个保存表格的按钮,并为其绑定了一个JavaScript函数`saveTable()`。该函数会将表格中的数据生成为一个二维数组`tableData`,并将其打印到浏览器控制台上。你可以在这里添加代码,将`tableData`发送到后端服务器或本地存储中。
当用户点击可编辑单元格时,表格会自动变成可编辑状态,用户可以修改单元格中的内容。当用户点击保存表格按钮时,JavaScript会遍历表格中的每个单元格,将其内容保存到一个二维数组中,并将该数组发送到后端服务器或本地存储中。
阅读全文