Question

我有一个要求使用jquery动态添加/删除表行。

我有一个包含2个文本框和2个按钮的表格行，添加了一个按钮，删除了其他按钮。

每当我点击添加按钮时，下一行应该使用Jquery创建2个文本框和2个按钮（添加/删除）。

周围的任何建议都会受到更多赞赏。

由于

Answer 1

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

Answer 2

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

如果您没有tbody，并且td都在table的正下方，请将其更改为$(this).closest('tr').clone().appendTo( $(this).closest('table') );。

这是小提琴：http://jsfiddle.net/Ke5Ss/

这可以通过缓存其中一些选择器进一步优化，但它应该让你开始朝着正确的方向......

Answer 3

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

使用jquery动态添加/删除行

3 个答案: