通过jQuery动态添加表单元素

我已经成功地设置了表单并使其正常工作。然而，我有两个问题：

a） “删除”按钮不起作用（它将删除表单元素的最后一行）

b） 这是一个很小的标记问题，当按“add”添加新行表单元素时，它不是创建新的

而是加载到现有行

这是演示链接

下面是我的JS代码

$(document).ready(function() {
$('#btnAdd').click(function() {
    var num = $('.clonedSection').length;
    var newNum = new Number(num + 1);

    var newSection = $('#pq_entry_' + num).clone().attr('id', 'pq_entry_' + newNum);

    newSection.children(':first').children(':first').attr('id', 'year_' + newNum).attr('name', 'year_' + newNum);
    newSection.children(':nth-child(2)').children(':first').attr('id', 'qualification_' + newNum).attr('name', 'qualification_' + newNum);
    newSection.children(':nth-child(2)').children(':first').attr('id', 'university_' + newNum).attr('name', 'university_' + newNum);

    $('.clonedSection').last().append(newSection)

    $('#btnDel').attr('disabled', '');

    if (newNum == 5) $('#btnAdd').attr('disabled', 'disabled');
});

$('#btnDel').click(function() {
    var num = $('.clonedSection').length; // how many "duplicatable" input fields we currently have
    $('#pq_entry_' + num).remove(); // remove the last element
    // enable the "add" button
    $('#btnAdd').attr('disabled', '');

    // if only one element remains, disable the "remove" button
    if (num - 1 == 1) $('#btnDel').attr('disabled', 'disabled');
});

$('#btnDel').attr('disabled', 'disabled');
});​

更改：

$('#btnDel').attr('disabled', '');

致：

“disabled”是一个属性而不是属性。此外，请更改任何其他实例

见：

要解决插入问题，请执行以下操作：

newSection.insertAfter('#pq_entry_' + num).last();

---

为什么不使用这样的解决方案呢

它是一个mvvmjavascript库，易于使用和理解。

---

更多信息。

为了解决您的第一个问题，我创建了一个

del（）

函数，该函数将计算剩余的“行”数，如果只有一行，将禁用

#btnDel

，反之，如果有多行，则启用它

然后，我，嗯，也改变了一切

var containerClass = '.clonedSection',
    containerElem = $(containerClass),
    a = $('#btnAdd'),
    d = $('#btnDel');

function numRows(elem) {
    return elem.length;
}

function del() {
    var r = numRows($(containerClass));
    if (r>1){
        d.prop('disabled',false);
    }
    else {
        d.prop('disabled',true);
    }
}

del();
a.click(
    function() {
        var rows = numRows($(containerClass)),
            lastRow = rows + 1,
            newRow = containerElem
            .first()
            .clone(true, true)
            .insertAfter($(containerClass).last());
        newRow
            .attr('id',function(i,v){
                return v.replace(/\d/,'')+lastRow;
            })
            .find('input').each(
            function() {
                var that = this;
                that.id = that.id.replace(/\d/, '') + lastRow;
                that.name = that.name.replace(/\d/, '') + lastRow;
            });
        del();
    });

d.click(
    function(){
        $(containerClass)
            .last()
            .remove();
        del();
    });​

将新行添加到现有

ul

时遇到的问题是，您查找了

.clonedSection

元素的最后一个，然后将新行附加到该元素，而不是使用

insertAfter（）

我认为上面的修订做了你需要的，希望足够清楚，可以遵循

参考资料：

---

我很确定这是一个属性：）或者使用$（'btnDel'）.attr（'disabled'，false）；直接从jQuery文档来看：属性通常会影响DOM元素的动态状态，而不会更改序列化的HTML属性。示例包括输入元素的值属性、输入和按钮的禁用属性或复选框的选中属性。应使用.prop（）方法来设置禁用和选中，而不是.attr（）方法。.val（）方法应用于获取和设置值。谢谢@trickyzter这似乎是个诀窍，也谢谢你的解释。您知道为什么新行

插入到现有的

中吗？@Iwani，您需要从ul中提取子项并附加它们。请参见上面的更改。谢谢Andrea！这看起来是一个很好的解决方案。下次我一定会用的！有人能帮我解决这个问题吗？哇！！感谢David抽出时间重写脚本。非常感谢你！我将仔细阅读您提供的代码和参考资料。非常感谢。不客气！我安静了几分钟，这让我很感兴趣。谢谢你！不管怎样，我希望这能有所帮助（如果你需要任何解释，我会尽我所能帮助你）嗨，David，我试着为我需要的实际功能定制您的原始代码，这将用于3个表单部分。对于这些部分中的每一部分，用户都可以动态添加要填写的字段行。我让它工作，但天啊，有很多小故障，所以我认为我的方法是不正确的。。。这是链接，如果你有时间看的话

var containerClass = '.clonedSection',
    containerElem = $(containerClass),
    a = $('#btnAdd'),
    d = $('#btnDel');

function numRows(elem) {
    return elem.length;
}

function del() {
    var r = numRows($(containerClass));
    if (r>1){
        d.prop('disabled',false);
    }
    else {
        d.prop('disabled',true);
    }
}

del();
a.click(
    function() {
        var rows = numRows($(containerClass)),
            lastRow = rows + 1,
            newRow = containerElem
            .first()
            .clone(true, true)
            .insertAfter($(containerClass).last());
        newRow
            .attr('id',function(i,v){
                return v.replace(/\d/,'')+lastRow;
            })
            .find('input').each(
            function() {
                var that = this;
                that.id = that.id.replace(/\d/, '') + lastRow;
                that.name = that.name.replace(/\d/, '') + lastRow;
            });
        del();
    });

d.click(
    function(){
        $(containerClass)
            .last()
            .remove();
        del();
    });​