Соединить код функционала для работы таблиц на javascript

Question

Помогите соединить код на jsfiddle c моим. Код с jsfiddle позволяет изменять значения ячеек. У меня возможность создавать таблицу по заполнению полей. В итоге должно получиться, чтобы я создавал таблицу при заполнении полей. А значения ячеек в итоговой таблице можно было изменять по клику.

Ссылка на jsfiddle

function addRow()
{    
    let d = document
    let name = d.getElementById('name').value
    let field = d.getElementById('field').value
    let posada = d.getElementById('posada').value        
    let tbody = d.querySelector('#tab1 tbody')    
    tbody.innerHTML += `<tr><td>${name}</td><td>${field}</td><td>${posada}</td><td><button onclick="this.closest('tr').remove()">Удалить</button></td></tr>`    
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="my.css" rel="stylesheet">
    <title>Привет мир!</title>
    
</head>
<body>

    <table id="tab1" class="sortable" style="border:solid 1px">
        <thead>
            <tr>
                <th>ФИО</th>
                <th>Должность</th>
                <th>Field</th>
                <th>Удалить</th>                
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>

    <form action="" id="add_persons" method="post" onsubmit="addRow();return false;">
        <fieldset>
        <legend>Добавить позицию</legend>
            <ul>
                <li>
                    <label for="name">Фамилия</label>
                    <input type="text" name="name" id="name" value="" size="12" tabindex="1" />
                </li>
                <li>
                    <label for="field">Инициалы</label>
                    <input type="text" name="field" id="field" value="" size="12" tabindex="2" />
                </li>
                <!-- Добавить поле для вывода -->
                <!-- <li>
                    <label for="field">Инициалы</label>
                    <input type="text" name="field" id="field" value="" size="12" tabindex="2" />
                </li> -->
                <li>
                    <label for="posada">Должность</label>
                    <input type="text" name="posada" id="posada" value="" size="12" tabindex="3" />
                </li>
                <li>
                    <label for="subm">Действия</label>
                    <input type="submit" name="subm" class="submit" value="Добавить" tabindex="4" />
                </li>
            </ul>
        </fieldset>
        </form>
    <script src="1.js"> </script>
</body>

БЛОГ НА HUSL

Соединить код функционала для работы таблиц на javascript

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