Javascript 动态添加复选框和输入框jquery

假设我有这种动态添加，如何防止第一个循环添加删除按钮。这是因为默认屏幕有一行没有按钮，当我动态添加这些新行时，我会删除第一行。因此，我需要动态添加的第一行没有按钮，这样它看起来就像我只添加了按钮，而没有删除第一行一样。

要防止第一行有按钮，请检查循环中的i==0

    for (var i = 0; i < Object.keys(value.material).length; i++) {
        var newRow = $('<tr/>');
        newRow.append('<td ><input type="checkbox" class="" name="[]" CHECKED/>Others</td><td><input type="text" value="' + value.material + '" class="" id="' + i + '"><button class="">Delete</button></td>');
    }
$("#tbl > tbody > tr:last").after(newRow);

使用更多jQuery

for (var i = 0; i < Object.keys(value.material).length; i++) {
    var newRow = $('<tr/>');
    newRow.append('<td ><input type="checkbox" class="" name="[]" CHECKED/>Others</td><td><input type="text" value="' + value.material + '" class="" id="' + i + '">' + (i == 0 ? '' : '<button class="">Delete</button></td>'));
}
$("#tbl > tbody > tr:last").after(newRow);

试试这个

$("#tbl > tbody > tr:last").after(function () {
    var i = 0;
    return $.map(value.material, function (val, key) {
        var row    = $('<tr />'),
            cell1  = $('<td />'),
            cell2  = $('<td />'),
            inp1   = $('<input />', {
                type    : 'checkbox',
                name    : '[]',
                checked : 'checked'
            }),
            inp2   = $('<input />', {
                type  : 'text',
                value : val,
                id    : i
            }),
            button = $('<button />', {
                text : 'Delete'
            });

        return row.append(
            cell1.append(inp1), 
            cell2.append(inp2, (i++ !== 0 ? button : []))
        );
    });
});

---

为i==0设置一个if条件，你能再解释一点，并显示我应该将其添加到哪一行吗？检查下面的答案你会为对象设置输入值吗？@adeneo我这样做了吗？如果我这样做了，我将删除它，如果我这样做是错误的，纠正我，如果我这样做是错误的，当for继续迭代var时，我将递增，然后我将转到其他位置，因为var i不再==到0，那么我将生成带按钮的行。然后我返回到我的原始问题，我希望第一行没有按钮。最初，我将为0，所以它将不包含任何按钮。然后在下一次迭代中，我将是`所以在这之后，所有其他行都将有按钮在第一次迭代之后，只有我将增加实际上我尝试过了，第一行仍然有按钮让我检查一下，也许我搞错了，可以用一些解释吗

$("#tbl > tbody > tr:last").after(function () {
    var i = 0;
    return $.map(value.material, function (val, key) {
        var row    = $('<tr />'),
            cell1  = $('<td />'),
            cell2  = $('<td />'),
            inp1   = $('<input />', {
                type    : 'checkbox',
                name    : '[]',
                checked : 'checked'
            }),
            inp2   = $('<input />', {
                type  : 'text',
                value : val,
                id    : i
            }),
            button = $('<button />', {
                text : 'Delete'
            });

        return row.append(
            cell1.append(inp1), 
            cell2.append(inp2, (i++ !== 0 ? button : []))
        );
    });
});

    for (var i = 0; i < Object.keys(value.material).length; i++) 
    {
       var newRow = '<tr>';
       newRow += '<td ><input type="checkbox" class="" name="[]" CHECKED/>Others</td><td><input type="text" value="' + value.material + '" class="" id="' + i + '">';

       if(i != 0)
         newRow += '<button class="">Delete</button>'

       newRow += '</td></tr>'
    }
    $("#tbl > tbody > tr:last").after(newRow);