Deleting a table row using row numbers in Javascript

Question

I created a table that can add rows by filling in a form. Every row added to the table, get's a row number. Now I want to delete a certain row by putting in the row number in another input (using a deleteRow-function).

<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>

This is the Javascript I use. I created a deleteRow-function, but it's not working yet. Thanks!

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;
}

collapsar · Accepted Answer · 2020-05-05 10:21:24Z

1

To simplify matters, add a data- attribute to the tr elements containing the respective row number.

Modification in addNumber:

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

The deleteRow function could look like this:

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();
}

Watch out for:

having 1 table only.
not to delete the last row

... and be aware that after the first call to deleteRow there will neither be a contiguous list of row numbers nor will the row number mirror the position of the row in the sequence of table rows.

edited May 5, 2020 at 10:21

answered May 5, 2020 at 9:03

collapsar

17.4k5 gold badges40 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Lucas Over a year ago

When I'm using your code, I get the following error: Cannot read property 'remove' of null. Do you know what is wrong?

collapsar Over a year ago

@Lucas Sorry, typo in code section (last line of function deleteRow). Updated my answer.

Collectives™ on Stack Overflow

Deleting a table row using row numbers in Javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related