要实现可编辑的 HTML 表格,你可以使用 JavaScript y HTML5 的 contenteditable 属性.
<!DOCTYPE html>
<html>
<cabeza>
<estilo>
mesa {
colapso fronterizo: colapso;
ancho: 100%;
}
th, td {
borde: 1px negro sólido;
relleno: 8px;
alineación de texto: izquierda;
}
</estilo>
</cabeza>
<cuerpo>
<id de tabla="tablaeditable">
<cabeza>
<tr>
<th>Nombre</th>
<th>Edad</th>
<th>Género</th>
</tr>
</thead>
<tcuerpo>
<tr>
<td contenteditable="true">Juan Pérez</td>
<td contenteditable="true">25</td>
<td contenteditable="true">Hombre</td>
</tr>
<tr>
<td contenteditable="true">Jane Smith</td>
<td contenteditable="true">30</td>
<td contenteditable="true">Mujer</td>
</tr>
<!-- 添加更多行 -->
</tbody>
</tabla>
<guión>
// 获取可编辑表格
var tabla = document.getElementById('editableTable');
// 遍历表格，为每个单元格添加事件侦听器
for (var i = 0; i < tabla.rows.length; i++) {
for (var j = 0; j < tabla.filas[i].celdas.longitud; j++) {
table.rows[i].cells[j].addEventListener('entrada', función () {
// 处理输入事件，可以在此处进行逻辑处理或保存数据
console.log(this.textContent);
});
}
}
</script>
</cuerpo>
</html>在上述示例中，使用了 contenteditable 属性来使表格单元格可编辑。添加 contenteditable="true"属性的单元格可以被鼠标点击并接受用户输入.
javascript部分遍历表格的所有单元格,并为每个单元格添加输入事件侦听器。在输入事件处理程序中,你可以根据需要处理用户的输入,比如更新数据或触发其他操作.
点击表格前:
点击表格后:
Tabla html+css内容请搜索downcodes.com以前的文章或继续浏览下面的相关文章,希望大家以后多多支持downcodes.com！