2

フォームに動的フィールドを追加できる機能を開発しようとしています。これで、既存のフィールドを複製してから複製します。これがコードです

/**
* This function is used to dynamically add or remove rows from an unordered List
**/
//For Dynamically Adding and Deleting the rows and columns
$('.addRow').click(function (e) {

    // This gets the number of textboxes
    var curMaxInput = $(this).closest('ul').find('input:text').length;

    //Clones the first row.
    var html = $(this).closest('ul').first().clone(true);

    //for every textbox the 
    html.find('input:text').each(function () {
        $(this).attr('id', $(this).attr('name') + '[' + (curMaxInput++) + ']');            
    });

    //Converting the '+' sign to '-' 
    html.find('span').removeClass('addRow').removeClass('ui-icon-plus').addClass('ui-icon-minus').addClass('removeRow');

    //Adding the onClick event to remove this row
    html.find('span').on('click', function () {
        $(this).parent().remove();
        return false;
    });

    // appending the html to the list and thus making it dynamic
    $(this).closest('ul').append(html.find('li').first());

    //avoiding Post backs if any
    return false;
});

</ p>

複製することはできますが、イベントのクローンを作成して、生成された新しい動的行フィールドにアタッチすることはできます。しかし、今、私がコピーを削除しようとすると、それは削除されません。さらに詳しい情報が必要な場合はお知らせください。皆さんがより多くの情報を必要とする場合に備えて、ここにjsfiddlerリンクがあります http://http://jsfiddle.net/jshah11/QavKj/3/

コメントに従って関数を更新し、jsfiddlerを更新しました

4

1 に答える 1

1

みんな、助けてくれてありがとう。機能を開発することができます。動的行フィールドを追加および削除するために使用できる関数を次に示します。

/**
 * This function is used to dynamically add or remove rows from a un-ordered List
 **/
//For Dynamically Adding and Deleting the rows and columns
$('.addRow').click(function(e) {

// This gets the number of textboxes
var curMaxInput = $(this).closest('ul').find('input:text').length;

//Clones the first row.
var html = $(this).closest('ul').first().clone(true);

//for every textbox the 
html.find('input:text').each(function() {
    $(this).attr('id', $(this).attr('name') + '[' + (curMaxInput++) + ']');
});

//Converting the '+' sign to '-' 
html.find('span').removeClass('addRow').removeClass('ui-icon-plus').addClass('ui-icon-minus').addClass('removeRow');

//Turn off the current event
html.find('span').off('click');

//Adding the onClick event to remove this row
html.find('span').on('click', function() {
    $(this).parent().remove();
    return false;
});

// appending the html to the list and thus making it dynamic
$(this).closest('ul').append(html.find('li').first());

//avoiding Post backs if any
 return false;
});​

この関数の参照用の jsFiddler リンクは次のとおりです http://jsfiddle.net/jsah11/QavKj/4/

再度、感謝します。

于 2012-12-05T16:16:12.923 に答える