動態添加復選框和輸入框jQuery

Question

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

假設我具有這種動態添加功能，如何防止第一個循環添加刪除按鈕。 這樣做的原因是因為默認屏幕上有一行沒有按鈕，並且當我動態添加這些新行時，我刪除了第一行。 所以我需要第一個動態添加的行沒有按鈕，以便它看起來像我僅添加了按鈕，而我沒有刪除第一個。

Answer 1

為了防止第一行出現按鈕，請檢查循環中i===0 ，

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

        } else {
        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>');
        }
    }

Answer 2

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

Answer 3

使用更多的jQuery嗎？

$("#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 : []))
        );
    });
});

Answer 4

嘗試這個

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