Показать сообщение отдельно
  #13 (permalink)  
Старый 10.02.2021, 21:40
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,439

сохранение и редактирование содержимого ячеек таблицы js
Konstantin47,

двойной клик по ячейке, вход/выход из режима редактирования.
начальные данные указать в массиве arr и придумать любое новое имя.
пример tableEditor(tbody, arr, 'test') строка 67
<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
    </style>
</head>
<body>
 <table id="table">
    <thead>
   <tr>
   <th scope="col">Nazwę</th>
   <th scope="col" >Opis</th>
   <th scope="col">&nbsp;</th>
   </tr>
   </thead>
   <tbody>

   </tbody>
 </table>
<script>
const tableEditor = (tbody, arr = [], localName = "tds") => {
    if (localStorage[localName]) arr = JSON.parse(localStorage.getItem(localName));
    let container = document.createDocumentFragment();
    arr.forEach((ar, j) => {
        let tr = document.createElement("tr");
        for (let txt of ar) {
            let td = document.createElement("td");
            td.innerHTML = txt;
            td.dataset.j = j;
            tr.append(td)
        }
        container.append(tr)
    });
    tbody.append(container);
    let input = document.createElement("input");

    tbody.addEventListener("dblclick", ({
        target
    }) => {
        if (input.parentNode) {
            let td = input.parentNode;
            let i = td.cellIndex;
            let j = td.dataset.j;
            input.remove();
            td.textContent = arr[j][i] = input.value;
            localStorage.setItem(localName, JSON.stringify(arr));
            
        }
        if (target.tagName == "TD") {
            input.value = target.textContent;
            target.textContent = "";
            target.append(input)
        }
    }, true);


}


let arr = [
    [1234, 1234],
    [1234, 1234]
];
let tbody = document.querySelector("#table tbody");
tableEditor(tbody, arr, "tdd")

</script>

</body>
</html>

Последний раз редактировалось рони, 10.02.2021 в 21:45.
Ответить с цитированием