在表中创建一个新行。javascript

我正在尝试向 DOM 添加新行。有名字和姓氏输入，以及一个添加按钮。单击按钮时，应将新行添加到表中。故障排除不起作用。

<table class="table">
    <tr>
        <th>Имя</th>
        <th>Фамилия</th>
        <th>Удалить</th>
    </tr>
    <tr>
        <td>Иван</td>
        <td>Васильевич</td>
        <td class="delete"><i class="fa fa-trash"></i></td>
    </tr>
    <tr>
        <td>Влад</td>
        <td>Анатольевич</td>
        <td class="delete"><i class="fa fa-trash"></i></td>
    </tr>
</table>

<form action="" id="form">
    <input type="text" name="" class="name" placeholder="Введите имя">
    <input type="text" name="" class="surname" placeholder="Введите фамилию">
    <button type="submit" class="btn">Добавить строку</button>
</form>

我自己编写了这个脚本，简化了网上找到的脚本。但它并没有像我预期的那样工作。现在了解一切如何运作对我来说很重要，看来我所做的一切都是依法进行的。第二天我已经坐在这个任务上。如果您有选择，请分享想法。

var table = document.querySelector('.table');
table.addEventListener('click', checkAct);

function checkAct(event) {
    if (event.target.tagName === 'TD' && event.target.className !== 'delete') {
        editTd(event.target);
    } else if ((event.target.classList.contains('fa-trash')) === true) {
        event.target.closest('tr').remove();
    }
}

function editTd(target) {
    var input = document.createElement('input');
    input.value = target.innerHTML;
    target.innerHTML = '';
    target.appendChild(input);
    input.addEventListener('keypress',addChanges);
}

function addChanges(event) {
    var newCreateInput = event.target;
    var parent = newCreateInput.parentNode;
    if(event.keyCode === 13) {
        parent.innerHTML = newCreateInput.value;
    }
}

var inputName = document.querySelector('.name');
var inputSurname = document.querySelector('.surname');
var btn = document.querySelector('.btn');
var tr = document.createElement('tr');

function definitionsName(name) {
    var td = document.createElement('td');
    td.innerHTML = name.value;
    tr.appendChild(td);
}

function definitionsSurname(surname) {
    var td = document.createElement('td');
    td.innerHTML = surname.value;
    tr.appendChild(td);
}

btn.addEventListener('click',addTr);

function addTr() {
    if (inputName.value === '' || inputSurname.value === '') {
        return alert('Заполните поля Имя и Фамилия');
    }
    definitionsName(name);
    definitionsSurname(surname);
    var td = document.createElement('td');
    var i = document.createElement('i');
    i.classList.add('fa fa-trash');
    td.appendChild(i);
    tr.appendChild(td);
    table.appendChild(tr);
}