编写一个HTML具有可编辑功能按钮的表格
时间: 2024-01-15 17:04:36 浏览: 24
可以参考以下代码实现:
```
<!DOCTYPE html>
<html>
<head>
<title>可编辑表格</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td contenteditable="true">张三</td>
<td contenteditable="true">25</td>
<td contenteditable="true">男</td>
<td><button onclick="deleteRow(this)">删除</button></td>
</tr>
<tr>
<td contenteditable="true">李四</td>
<td contenteditable="true">30</td>
<td contenteditable="true">女</td>
<td><button onclick="deleteRow(this)">删除</button></td>
</tr>
<tr>
<td contenteditable="true">王五</td>
<td contenteditable="true">20</td>
<td contenteditable="true">男</td>
<td><button onclick="deleteRow(this)">删除</button></td>
</tr>
</tbody>
</table>
<script>
// 删除行
function deleteRow(btn) {
var row = btn.parentNode.parentNode;
row.parentNode.removeChild(row);
}
</script>
</body>
</html>
```
在这个表格中,我们使用了 `contenteditable` 属性来让单元格变为可编辑状态。同时,每一行也有一个“删除”按钮,点击该按钮可以删除相应的行。