Перезапись двумерного массива

Question

Создал таблицу выводящуюся из массива, но не пойму как создать функцию, которая будет перезаписывать объект в моём массиве при редактировании на странице. Код рабочий можете запустить.

Была мысль дать всем ячейкам id по их ключу и потом как то создать уже функцию для их редактирования, но у меня не получается сделать это.

window.onload = function() {
    document.querySelector('.bottom_panel > .plus').addEventListener('click', plusRow);
    document.querySelector('.bottom_panel > .minus').addEventListener('click', minusRow);

    document.querySelector('.right_panel > .plus').addEventListener('click', plusRight);
    document.querySelector('.right_panel > .minus').addEventListener('click', minusRight);
    // document.querySelectorAll('td > #0_0').addEventListener('oninput', alert);
    const tbody = document.querySelector("tbody")

    // function alert() {
    //     alert("11")
    // }

    array = [
        ["Начало",2,3,4],
        [5,6,7,8],
        [9,10,11,12],
        [13,14,15,16]
    ];

    let N = ''
    let amountRow = array.length
    newRow = []
    let amountСolumn = array[0].length
    console.log(amountСolumn)

    function tableBuilder() {
        tbody.textContent = ""
        for (i = 0; i < array.length; i++) {
            var tr = document.createElement('tr')
            for (j = 0; j < array[i].length; j++) {
                var td = document.createElement('td')
                td.innerHTML = `<input id="` + i + `_` + j + `" type="text" value="` + array[i][j] + `">`
                tr.appendChild(td)
            }
            tbody.appendChild(tr)
        }
    }
    tableBuilder()

    function plusRow() {
        for (i = 0; i < array[0].length; i++) {
            newRow.push('')
            console.log(newRow)
        }
        array.push(newRow)
        amountRow = array.length
        console.log(array)
        newRow = []
        tableBuilder()
    }

    function minusRow() {
        if (amountRow > 1) {
            array.pop()
            amountRow = array.length
            console.log(amountRow)
        } else {
            alert("Невозможно удалить последнюю строку")
        }
        tableBuilder()
    }

    function plusRight() {
        for ( i = 0; i < array.length; i++) {
            array[i].push(N)
        }
        console.log(array)
        amountСolumn = array[0].length
        tableBuilder()
    }

    function minusRight() {
        if (amountСolumn > 1) {
            for ( i = 0; i < array.length; i++) {
                array[i].pop()
            }
            amountСolumn = array[0].length
            tableBuilder()
        } else {
            alert("Невозможно удалить последний столбец")
        }

    }
}

// for (i = 0; i < array[0].length; i++) {
//     rowNumber = array[i]
//     for (k = 0; k < rowNumber.length; k++)
//         point = rowNumber[k]
//     console.log(rowNumber[k])
//     tbody.innerHTML += `<div>` + point + `</div>`
// }

body {
    display: flex;
    justify-content: center;
    margin: 20vh 0 0 0;
}

table {
    border-collapse: collapse;
}

td {
    text-align: center;
    width: 100px;
    height: 35px;
    border: black 1px solid;
}

td:hover, input:hover {
    cursor: pointer;
    background: silver;
}

td:hover input {
    cursor: pointer;
    background: silver;
}

input {
    margin: 1px 0 0 0;
    border: none;
    width: 90%;
    height: 90%;
}

input:focus {
    border: 1px #000 solid;
    outline:none;
    background: none !important;
}

button {
    cursor: pointer;
    width: 35px;
    height: 20px;
}

.minus {
    margin: 0 0 0 10px;
}

.bottom_panel {
    display: flex;
    justify-content: center;
    margin: 20px 0 0 0;
}

.right_panel {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: -3% 0 0 20px;
}

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="style.css" rel="stylesheet">
    <title>Spreadsheet</title>
    <script src="script.js"></script>
</head>
<body>
    <div class="table">
        <table>
            <tbody>

            </tbody>
        </table>
        <div class="bottom_panel">
            <button class="plus">+</button>
            <button class="minus">-</button>
        </div>
    </div>
    <div class="right_panel">
        <button class="plus">+</button>
        <button class="minus">-</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

<!--<tr>-->
<!--    <td><input class="input" type="text" value="1" readonly="true" ondblclick="this.readOnly='';"></td>-->
<!--    <td><input type="text" value="2"></td>-->
<!--    <td><input class="input" type="text" value="3"></td>-->
<!--</tr>-->

БЛОГ НА HUSL

Перезапись двумерного массива

Ответы (0 шт):