-2

Javascript を使用して動的テキストボックスを追加しようとしています。

誰かがAdd Moreリンクをクリックすると、2 つのテキスト ボックスが動的に追加されます。

Add More誰かがリンクをクリックしたときに繰り返したい HTML コードがあります。

<div class="row">
    <div class="left">Employer</div>
    <div class="right"><input type="text" class="tripObject" name="employer" id="employer" value=""> &nbsp; <strong>Position</strong> &nbsp; <input type="text" class="tripObject" name="position" id="position" value=""> &nbsp; <a href="javascript:addFormField();">Add More</a>
    </div>  
</div>

JavaScriptコードは次のとおりです。

window.optionId =1;

window.addFormField = function() {
    optionId += 1;
    var thisOption = $('<div>', {
        'class': 'row ' + optionId
    }).append(
        $('<div>').attr({
            'class': 'left'
        }).html('Employer'), 
        /*$('<div>').attr({
            'class': 'right'}),*/
        $('<input>').attr({
            'type': 'text',
            'size': 20,
            'name': 'option_' + optionId,
            'class': 'tripObject',
            'validate': 'required:true'
        }), 
        $('<a>').attr({
            'href': '#'
        }).html('Remove').click(function() {
            thisOption.remove();
        })
    ).appendTo('#editeducationInfo');
};
4

2 に答える 2

1

なんで複雑にするの？jqueryコードで使用しているようにclone、appendメソッドによって既存の要素を追加する簡単な方法を次に示します。

ドキュメント: $.append()、$.clone()

var obj =  $("div.right").eq(0).clone(); //this will clone the html elements
$("div.row").append(obj); //this will append to the existing elements

アップデート：

このフィドルをチェックしてください

于 2013-01-30T06:47:06.877 に答える
0

DONの答えは正しいです。ただし、それに伴い、ID および NAME 属性も変更する必要があります。そうしないと、フォーム送信からデータを取得すると、すべての要素が同じ名前である場合に問題が発生します。

于 2013-01-30T07:02:29.497 に答える