Add/delete rows dynamically using jquery

Question

I have a requirement adding/deleting table rows dynamically using jquery.

I have a table row with 2 text boxes and 2 buttons, one button is add and other button is delete.

whenever I click the add button next row should be created with 2 text boxes and 2 buttons( add/delete) using Jquery.

Any suggestions around would be more appreciated.

Thanks

Pretty easy. You can use the event handlers (eg: onClick()) and append a row to the table. Similarly, you can get the last child(DOM) among the rows and remove it. Where exactly are you stuck? can you add an example? :) — Ashwin
– Ashwin, Commented Sep 20, 2011 at 2:38

aquinas · Accepted Answer · 2013-04-23 16:34:09Z

2

Something like this: http://jsfiddle.net/AWM44/

<html>
    <body>
        <table id="foo" border="1">
            <tr>
                <td>Hello</td>
                <td><input type="text></td>
                    <td><input type="text></td>
                <td><input type="button" class="addButton" value="add"/></td>
                <td><input type="button" class="deleteButton" value="delete"/></td>
            </tr>
        </table>
    </body>
</html>

$(function(){
    $(".addButton").click(function(){
        $(this).closest("tr").clone(true).appendTo("#foo");
    });

    $(".deleteButton").click(function(){
        $(this).closest("tr").remove();
    });
});

edited Apr 23, 2013 at 16:34

answered Sep 20, 2011 at 2:41

aquinas

23.9k5 gold badges60 silver badges82 bronze badges

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

2 Comments

Nicholas Pappas Over a year ago

Is there a simple way to detect that only 1 row remains, to stop a "delete" action? A simple counter would seem to work, but wasn't sure if there was another fancier way.

aquinas Over a year ago

You could check how many rows are in the table by doing this: $(this).closest("tbody").find("tr").length

Joseph Silber · Accepted Answer · 2011-09-20 02:46:42Z

1

$('#theTable').delegate('.delete', 'click', function(){
    $(this).closest('tr').remove();
})
.delegate('.add', 'click', function(){
    $(this).closest('tr').clone().appendTo( $(this).closest('tbody') );
});

If you don't have a tbody, and your tds are all directly under your table, change it to $(this).closest('tr').clone().appendTo( $(this).closest('table') );.

Here's the fiddle: http://jsfiddle.net/Ke5Ss/

This can be further optimized by caching some of those selectors, but it should get you started in the right direction...

edited Sep 20, 2011 at 2:46

answered Sep 20, 2011 at 2:41

Joseph Silber

221k59 gold badges369 silver badges292 bronze badges

1 Comment

Joseph Silber Over a year ago

@user948030 - If an answer has solved your problem, accept it by clicking on the checkmark next to it, so that others coming to this post will know that it is the correct answer.

Harish Reddy Pothula · Accepted Answer · 2019-06-11 22:35:31Z

window.onload = data;
var rows = [
    {
        id: 1,
        cat: 'Category',
    },
    {
        id: 2,
        cat: 'Category',
    },
    {
        id: 3,
        cat: 'Category',
    },
];

function data() {
    var html = '<tbody>';
    for (var i = 0; i < rows.length; i++) {
        const tempid = i + 1;
        html += '<tr>';
        html += "<td class='text-secondary'>" + '&equiv;' + '</td>';
        html += '<td>' + rows[i].cat + ' ' + tempid + '</td>';
        html +=
            '<td>' +
            '<span class="badge badge-success">' +
            tempid +
            '</span>' +
            '</td>';
        html +=
            "<td class='text-right'>" +
            "<button id='" +
            i +
            "' class='btn btn-danger button btn-circle text-danger bg-transparent'>X</button>" +
            '</td>';
        html += '</tr>'
    }
    html += '</tbody>';
    document.getElementById('table_rows').innerHTML = html
}

function addRow() {
    const table = document.getElementById('table_rows');
    const table_len = table.rows.length + 1;
    var html = '<tr>';
    html += "<td class='text-secondary'>" + '&equiv;' + '</td>';
    html += '<td>' + '<input type="text" id="new_cat"/>' + '</td>';
    html +=
        '<td>' +
        '<span class="badge badge-success">' +
        table_len +
        '</span>' +
        '</td>';
    html +=
        "<td class='text-right'>" +
        "<input type='button' class='btn button btn-link text-primary' onclick='saveRow()' value='Save'>" +
        '</td>';
    html += '</tr>';
    var newRow = document.getElementById('table_rows').insertRow();
    newRow.innerHTML = html
}

$('table').on('click', 'tr td .button', function (e) {
    e.preventDefault();
    $(this)
        .closest('tr')
        .remove()
});

function saveRow() {
    const new_cat = document.getElementById('new_cat').value;
    if (new_cat === '') {
        alert('Please enter some value')
    } else {
        const table = document.getElementById('table_rows');
        const id = table.rows.length;
        const table_len = table.rows.length - 1;
        table.insertRow(table_len).outerHTML =
            "<tr id='row" +
            table_len +
            "'>" +
            "<td id='new_row_id" +
            table_len +
            "' class='text-secondary'>" +
            '&equiv;' +
            '</td>' +
            "<td id='cat_row" +
            table_len +
            "' class='text-secondary'>" +
            new_cat +
            '</td>' +
            "<td id='seq_row" +
            table_len +
            "'>" +
            '<span class="badge badge-success">' +
            id +
            '</span>' +
            '</td>' +
            "<td class='text-right'><input type='button' value='X' class='btn button btn-danger btn-circle text-danger bg-transparent'></td></tr>";
        $('tbody tr:last').remove()
    }
}

Collectives™ on Stack Overflow

Add/delete rows dynamically using jquery

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related