Question

我成功地设置了表单并使其工作。但是我有两个问题：

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

b）这是一个次要的标记问题，当按“添加”添加一行新的表单元素时，而不是创建一个新的<ul></ul>它已加载到现有行<ul></ul>

我的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');
});

Answer 1

为了解决您的第一个问题，我创建了一个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()。

我认为以上版本可以满足您的需求，并且希望能够完全遵循。

参考文献：

Answer 2

为什么不使用这样的解决方案来做到这一点？ http://jsfiddle.net/rniemeyer/gZC5k/

这是一个 mvvm javascript库，易于使用和理解。更多信息here。

Answer 3

变化：

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

要：

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

'禁用'是属性而非属性。此外，更改任何其他实例。

请参阅：http://jsfiddle.net/34rYv/2/

修复插入问题：

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

http://jsfiddle.net/34rYv/25/

通过jQuery动态添加表单元素

3 个答案: