Add/delete rows dynamically using jquery_问答_开发者

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) usin开发者_C百科g Jquery.

Any suggestions around would be more appreciated.

Thanks

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

$('#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...

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