动态添加复选框和输入框 jQuery

dynamic adding of checkbox and input box jquery

本文关键字：jQuery 输入 添加 复选框 动态      更新时间：2023-09-26
    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);

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

要防止第一行有按钮，请检查循环中是否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>');
        }
    }

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

试试这个

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

使用 more 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 : []))
        );
    });
});
相关文章：