4

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

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

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

这是演示链接http://jsfiddle.net/34rYv/1/

下面是我的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');
});​
4

3 回答 3

2

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

我认为上述修订版可以满足您的需求，并且希望足够清晰，可以遵循。

参考：

于 2012-04-20T20:04:35.943 回答
1

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

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

于 2012-04-20T17:49:23.193 回答
0

改变：

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

到：

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

“禁用”是属性而不是属性。此外，更改任何其他实例。

见：http: //jsfiddle.net/34rYv/2/

要解决插入问题：

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

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

于 2012-04-20T17:46:39.663 回答