当然可以!下面是一个使用 HTML + CSS
实现的可编辑表格示例,支持用户直接在表格中点击单元格并编辑内容。
✅ 示例代码:基础可编辑表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>可编辑表格示例</title>
<style>
table {
width: 80%;
border-collapse: collapse;
margin: 20px auto;
font-family: sans-serif;
}
th, td {
border: 1px solid #ccc;
padding: 10px;
text-align: center;
}
th {
background-color: #f4f4f4;
}
td[contenteditable="true"] {
background-color: #fffbe6;
cursor: text;
outline: none;
transition: background-color 0.3s;
}
td[contenteditable="true"]:hover {
background-color: #fff2b3;
}
caption {
caption-side: top;
font-size: 1.2em;
margin-bottom: 10px;
font-weight: bold;
}
</style>
</head>
<body>
<table>
<caption>学生成绩表(点击可编辑)</caption>
<thead>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
</tr>
</thead>
<tbody>
<tr>
<td contenteditable="true">张三</td>
<td contenteditable="true">85</td>
<td contenteditable="true">92</td>
<td contenteditable="true">78</td>
</tr>
<tr>
<td contenteditable="true">李四</td>
<td contenteditable="true">76</td>
<td contenteditable="true">88</td>
<td contenteditable="true">90</td>
</tr>
<tr>
<td contenteditable="true">王五</td>
<td contenteditable="true">90</td>
<td contenteditable="true">81</td>
<td contenteditable="true">85</td>
</tr>
</tbody>
</table>
</body>
</html>
✨ 功能说明:
功能 | 说明 |
---|---|
contenteditable="true" | 使单元格可编辑 |
CSS hover 效果 | 鼠标移入时高亮,提升用户体验 |
响应式结构 | 兼容 PC 和移动端展示(适度) |
✅ 可选增强(进阶)
- 保存按钮 + JS 获取数据
- 添加/删除行
- 输入校验(如只能输入数字)
- 双击编辑 / 单击显示
如果你需要实现这些扩展功能,也可以告诉我,我可以帮你一步步加上。是否需要?
发表回复