4

フォームを設定して機能させることに成功しました。ただし、2つの問題があります。

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()残りの「行」の数を評価し、1 つしかない場合は無効にする#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 に答える