Простая редактируемая HTML-таблица (краткий пример)
Добавить в избранное
Скрипт редактируемой таблицы.
ЧАСТЬ 1) HTML
Создаём файл index.html с таким содержимым.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Простая редактируемая HTML-таблица</title>
<link rel="stylesheet" href="style.css"/>
<script defer src="js.js"></script>
</head>
<body>
<table id="demo" class="editable">
<!-- HEADER -->
<thead>
<tr>
<th>Имя</th>
<th>Email</th>
</tr>
</thead>
<!-- ДАННЫЕ -->
<tbody>
<tr>
<td>Марина</td>
<td>marina@mari.com</td>
</tr>
<tr>
<td>Ирина</td>
<td>ira@ira.com</td>
</tr>
<tr>
<td>Кира</td>
<td>kira@kira.com</td>
</tr>
<tr>
<td>Егор</td>
<td>yegor@yegor.com</td>
</tr>
<tr>
<td>Одил</td>
<td>odil@odil.com</td>
</tr>
</tbody>
</table>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Простая редактируемая HTML-таблица</title>
<link rel="stylesheet" href="style.css"/>
<script defer src="js.js"></script>
</head>
<body>
<table id="demo" class="editable">
<!-- HEADER -->
<thead>
<tr>
<th>Имя</th>
<th>Email</th>
</tr>
</thead>
<!-- ДАННЫЕ -->
<tbody>
<tr>
<td>Марина</td>
<td>marina@mari.com</td>
</tr>
<tr>
<td>Ирина</td>
<td>ira@ira.com</td>
</tr>
<tr>
<td>Кира</td>
<td>kira@kira.com</td>
</tr>
<tr>
<td>Егор</td>
<td>yegor@yegor.com</td>
</tr>
<tr>
<td>Одил</td>
<td>odil@odil.com</td>
</tr>
</tbody>
</table>
</body>
</html>
ЧАСТЬ 2) JAVASCRIPT
Создаём файл js.js с таким содержимым.
// ИНИЦИАЛИЗАЦИЯ - ДВОЙНОЙ ЩЕЛЧОК ДЛЯ РЕДАКТИРОВАНИЯ ЯЧЕЙКИ
window.addEventListener("DOMContentLoaded", () => {
for (let cell of document.querySelectorAll("#demo td")) {
cell.ondblclick = () => { editable.edit(cell); };
}
});
let editable = {
// "ПРЕОБРАЗОВАТЬ" В РЕДАКТИРОВАННУЮ ЯЧЕЙКУ
edit: (cell) => {
// УДАЛИТЬ "ДВОЙНОЙ ЩЕЛЧОК ДЛЯ РЕДАКТИРОВАНИЯ"
cell.ondblclick = "";
// РЕДАКТИРУЕМОЕ СОДЕРЖИМОЕ
cell.contentEditable = true;
cell.focus();
// "ОТМЕТИТЬ" ТЕКУЩУЮ ВЫБРАННУЮ ЯЧЕЙКУ
cell.classList.add("edit");
editable.selected = cell;
// НАЖМИТЕ ENTER ИЛИ ЩЕЛКНИТЕ ВНЕ, ЧТОБЫ ЗАВЕРШИТЬ РЕДАКТИРОВАНИЕ
window.addEventListener("click", editable.close);
cell.onkeydown = (evt) => { if (evt.key=="Enter") {
editable.close(true);
return false;
}};
},
// ЗАВЕРШИТЬ "РЕЖИМ РЕДАКТИРОВАНИЯ"
selected: null, // текущая выбранная ячейка
close: (evt) => { if (evt.target != editable.selected) {
// ДЕЛАЙТЕ ВСЕ, ЧТО ВАМ НУЖНО
// проверить значение?
// отправить значение на сервер?
// обновить расчеты в таблице?
// УДАЛИТЬ "РЕДАКТИРОВАНИЕ"
window.getSelection().removeAllRanges();
editable.selected.contentEditable = false;
// ВОССТАНОВИТЬ КЛИК-СЛУШАТЕЛИ
window.removeEventListener("click", editable.close);
let cell = editable.selected;
cell.ondblclick = () => { editable.edit(cell); };
// "СНЯТЬ ПОМЕТКУ" ТЕКУЩЕЙ ВЫБРАННОЙ ЯЧЕЙКИ
editable.selected.classList.remove("edit");
editable.selected = null;
}}
};
window.addEventListener("DOMContentLoaded", () => {
for (let cell of document.querySelectorAll("#demo td")) {
cell.ondblclick = () => { editable.edit(cell); };
}
});
let editable = {
// "ПРЕОБРАЗОВАТЬ" В РЕДАКТИРОВАННУЮ ЯЧЕЙКУ
edit: (cell) => {
// УДАЛИТЬ "ДВОЙНОЙ ЩЕЛЧОК ДЛЯ РЕДАКТИРОВАНИЯ"
cell.ondblclick = "";
// РЕДАКТИРУЕМОЕ СОДЕРЖИМОЕ
cell.contentEditable = true;
cell.focus();
// "ОТМЕТИТЬ" ТЕКУЩУЮ ВЫБРАННУЮ ЯЧЕЙКУ
cell.classList.add("edit");
editable.selected = cell;
// НАЖМИТЕ ENTER ИЛИ ЩЕЛКНИТЕ ВНЕ, ЧТОБЫ ЗАВЕРШИТЬ РЕДАКТИРОВАНИЕ
window.addEventListener("click", editable.close);
cell.onkeydown = (evt) => { if (evt.key=="Enter") {
editable.close(true);
return false;
}};
},
// ЗАВЕРШИТЬ "РЕЖИМ РЕДАКТИРОВАНИЯ"
selected: null, // текущая выбранная ячейка
close: (evt) => { if (evt.target != editable.selected) {
// ДЕЛАЙТЕ ВСЕ, ЧТО ВАМ НУЖНО
// проверить значение?
// отправить значение на сервер?
// обновить расчеты в таблице?
// УДАЛИТЬ "РЕДАКТИРОВАНИЕ"
window.getSelection().removeAllRanges();
editable.selected.contentEditable = false;
// ВОССТАНОВИТЬ КЛИК-СЛУШАТЕЛИ
window.removeEventListener("click", editable.close);
let cell = editable.selected;
cell.ondblclick = () => { editable.edit(cell); };
// "СНЯТЬ ПОМЕТКУ" ТЕКУЩЕЙ ВЫБРАННОЙ ЯЧЕЙКИ
editable.selected.classList.remove("edit");
editable.selected = null;
}}
};
ЧАСТЬ 3) CSS
Создаём файл style.css с таким содержимым.
/* вся страница */
* {
font-family: arial, sans-serif;
box-sizing: border-box;
}
/* РЕДАКТИРУЕМАЯ ТАБЛИЦА */
.editable {
border-collapse: collapse;
}
.editable th, .editable td {
border: 1px solid #000;
padding: 10px;
}
.editable th {
color: #fff;
background: #000;
}
.editable td.edit {
background: #ffe7e7;
}
* {
font-family: arial, sans-serif;
box-sizing: border-box;
}
/* РЕДАКТИРУЕМАЯ ТАБЛИЦА */
.editable {
border-collapse: collapse;
}
.editable th, .editable td {
border: 1px solid #000;
padding: 10px;
}
.editable th {
color: #fff;
background: #000;
}
.editable td.edit {
background: #ffe7e7;
}
Можете посмотреть и скачать пример.
Посмотреть
Скачать