1

フィールドのグループを何度でも複製できるようにしたいテーブル インサイト フォームがあります。また、これらの新しいフィールド グループの属性のフィールド ID、名前、およびラベルを 1 増やしたいと考えています。これまで jQuery でこれを試し、少なくともフィールド グループを複製しましたが、削除はしません。動作しません。そして、これらの 3 つの属性のそれぞれに対して +1 を行う方法がわかりません。私が得ることができる助けに感謝します。

    <tr>
        <td>name<span class="description"></span>
        </td>
        <td>
            <input type="text" name="type_1" id="type_11" class="regular-text" />
        </td>
    </tr>
    <tr>
        <td>pic<span class="description"></span>
        </td>
        <td>
            <input type="file" name="logo_1" id="logo_1" />
        </td>
    </tr>
    <div class="formRowRepeatingSection"><a href="#" class="addPro">Add New</a>
    </div>
<div class="repeatingSection"></div>

JS-Jクエリ

$(function(){
$('#addPro').click(function() {


    $('#repeatingSection').append('<tr><td>name<span class="description"></span></td><td><input type="text" name="pro_1'+i+'[]" id="pro_1'+i+'[] class="regular-text" /></td></tr><tr><td>pic<span class="description"></span></td><td><input type="file" name="pro_pic_1'+i+'[]" id="pro_pic_1'+i+'[]" /></td></tr>');



}); 
});

「#addPro」をクリックすると、このコード html を「#repeatingSection」で繰り返す必要があります。

編集：-

$(function(){
$('#addPro').click(function() {

    $('#repeatingSection').append('<tr><td>name<span class="description"></span></td><td><input type="text" name="pro_1'+i+'[]" id="pro_1'+i+'[]" class="regular-text" /></td></tr><tr><td>pic<span class="description"></span></td><td><input type="file" name="pro_pic_1'+i+'[]" id="pro_pic_1'+i+'[]" /></td></tr>');



}); 
});

私は今編集します....しかし、#addPro新しい行の挿入をクリックするときに必要です

4

1 に答える 1

0

HTML

<table>
    <tr>
        <td>name<span class="description"></span>

        </td>
        <td>
            <input type="text" name="type_1" id="type_11" class="regular-text" />
        </td>
    </tr>
    <tr>
        <td>pic<span class="description"></span>

        </td>
        <td>
            <input type="file" name="logo_1" id="logo_1" />
        </td>
    </tr>
</table>
<div class="formRowRepeatingSection"><a href="#" id="addPro">Add New</a>

</div>
<div id="repeatingSection"></div>

jQuery

$(document).ready(function () {
    var i = 0;
    $('#addPro').click(function () {
        console.log(i);
        i++;
        $('#repeatingSection').append('<tr><td>name<span class="description"></span></td><td><input type="text" name="pro_1' + i + '[]" id="pro_1' + i + '[]" class="regular-text" /></td></tr><tr><td>pic<span class="description"></span></td><td><input type="file" name="pro_pic_1' + i + '[]" id="pro_pic_1' + i + '[]" /></td></tr>');
    });
});

デモはこちら

私が変更したこと：

  • html で置き換え: 要素内の ID へのクラス<a>と、追加する div 内#repeatingSection
  • "ここに ID のクローズを追加id="pro_1'+i+'[] class="regular-text"
  • var i = 0;クリック機能の外側とi++;内側に追加されました。
  • の開始タグと終了タグも追加<table>しました。投稿していないコードの別の場所にある可能性があります。正しいhtmlマークアップを追加するためだけに追加しました。
于 2013-10-20T17:15:53.507 に答える