Удаление строки таблицы с использованием номеров строк в Javascript

Question

Я создал таблицу, в которую можно добавлять строки, заполнив форму. Каждая строка, добавленная в таблицу, получает номер строки. Теперь я хочу удалить определенную строку, указав номер строки в другом вводе (с помощью функции deleteRow).

<table id="table">
    <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Points</th>
    </tr>
</table>

<form action="" id="form" name="form">
    First name: <input type="text" id="fnaam"> <br>
    Last name: <input type="text" id="lnaam"><br>
    Points: <input type="text" id="points">
</form>

<button type="button" id="addBtn">Voeg toe</button>

Fill in row number: <input type="text" id="deleteRowInput"> <br>
<button type="button" id="deleteBtn">Delete Row</button>

Это Javascript, который я использую. Я создал функцию deleteRow, но она еще не работает. Спасибо!

var addBtn = document.getElementById('addBtn');
var deleteBtn = document.getElementById('deleteBtn');
addBtn.onclick = addRow;
deleteBtn.onclick = deleteRow;

var rowNumber = 0;

function addRow() {
    //getting data from form
    var form = document.getElementById('form');
    var newData = [];
    for(var i = 0; i < form.length; i++) {
        newData[i] = form.elements[i].value;
    }

    if(validateForm() == true) {
        rowNumber++;
        //Put data in table
        var table = document.getElementById('table');
        var newRow = table.insertRow();

        //Adding rownumber to row
        newRow.innerHTML = `<tr><td><i>${rowNumber}</i></td><tr>`;

        for(var i = 0; i < 3; i++) {
        var newCell = newRow.insertCell(i);
        newCell.innerHTML = newData[i];
        }
    }
    form.reset();
}

function deleteRow() {
    var table = document.getElementById('table');
    var input = document.getElementById('deleteRowInput');

}

//validating form
function validateForm() {
    var f = document.getElementById('form');

    if(f.fnaam.value == '') {
        alert('Please fill in first name!');
        return false;
    }
    if(f.lnaam.value == '') {
        alert('Please fill in last name!');
        return false;
    }
    if(f.points.value == '') {
        alert('Please fill in points!');
        return false;
    }
    if(isNaN(f.points.value)) {
        alert('Points should be a number!')
        return false
    }
    return true;
}

Answer 1

Чтобы упростить задачу, добавьте атрибут data- к элементам tr, содержащим соответствующий номер строки.

Изменение в addNumber:

newRow.innerHTML = `<tr data-row-number="${rowNumber}"><td><i>${rowNumber}</i></td><tr>`;

The deleteRow функция могла бы выглядеть так:

function deleteRow() {
    let table = document.getElementById('table');
    let input = document.getElementById('deleteRowInput');
    let n_rowToDelete = input.value;

    document.querySelector ( 'tr[data-row-number="' + n_rowToDelete + '"]' ).remove();
}

Остерегайтесь:

• с одной таблицей.
• не удалять последнюю строку

... и имейте в виду, что после первого вызова deleteRow не будет ни непрерывного списка номеров строк, ни номера строки не будут отражать позицию строки в последовательности строк таблицы.