要实现可编辑的 HTML, JavaScript, HTML5 и contenteditable.。
<!DOCTYPE html>
<html>
<голова>
<стиль>
стол {
граница-коллапс: коллапс;
ширина: 100%;
}
й, тд {
граница: 1 пиксель, сплошная черная;
отступ: 8 пикселей;
выравнивание текста: по левому краю;
}
</стиль>
</голова>
<тело>
<table id="editableTable">
<голова>
<тр>
<th>Имя</th>
<th>Возраст</th>
<th>Пол</th>
</tr>
</тхед>
<тело>
<тр>
<td contenteditable="true">Джон Доу</td>
<td contenteditable="true">25</td>
<td contenteditable="true">Мужчина</td>
</tr>
<тр>
<td contenteditable="true">Джейн Смит</td>
<td contenteditable="true">30</td>
<td contenteditable="true">Женщина</td>
</tr>
<!-- 添加更多行 -->
</tbody>
</таблица>
<скрипт>
// 获取可编辑表格
var table = document.getElementById('editableTable');
// 遍历表格,为每个单元格添加事件侦听器
for (var i = 0; i < table.rows.length; i++) {
for (var j = 0; j < table.rows[i].cells.length; j++) {
table.rows[i].cells[j].addEventListener('input', function () {
// 处理输入事件，可以在此处进行逻辑处理或保存数据
console.log(this.textContent);
});
}
}
</скрипт>
</тело>
</html>添加 contenteditable="true"属性的单元格可以被鼠标点击并接受用户输入。
JavaScript部分遍历表格的所有单元格,并为每个单元格添加输入事件侦听器。在输入事件处理程序中,你可以根据需要处理用户的输入,比如更新数据或触发其他操作。
点击表格前:
点击表格后:
HTML-таблица + CSS-код, HTML-код, таблица и HTML-код. Сайт Downcodes.com, сайт Downcodes.com, магазин Downcodes.com, магазин Downcodes.com！