html table+css实现可编辑表格
要在HTML表格中使用CSS实现可编辑功能，可以使用contenteditable属性。这个属性可以让任何元素变得可编辑。
以下是一个简单的HTML表格，其中的单元格通过设置contenteditable="true"实现可编辑。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>可编辑表格</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<table>
<tr>
<th contenteditable="true">头部1</th>
<th contenteditable="true">头部2</th>
<th contenteditable="true">头部3</th>
</tr>
<tr>
<td contenteditable="true">行1, 列1</td>
<td contenteditable="true">行1, 列2</td>
<td contenteditable="true">行1, 列3</td>
</tr>
<tr>
<td contenteditable="true">行2, 列1</td>
<td contenteditable="true">行2, 列2</td>
<td contenteditable="true">行2, 列3</td>
</tr>
</table>
</body>
</html>在上述代码中，表格的头部（th元素）和单元格（td元素）都设置了contenteditable="true"，这让它们变得可编辑。用户可以点击并开始编辑内容。
要注意的是，contenteditable属性可能会引入XSS攻击风险，因此在处理用户输入时应该进行适当的清洁和验证。
评论已关闭