0

フォームの行を複製する必要があります (テーブル内)

ここで jsbin を参照してください: http://jsbin.com/ExiRAMa/1/edit

マークアップ:

<div id="o99_the_work">
  <table><tbody>
  <tr>
                <!--    THE ORDER -->
<td>X</td>
<td class="small-text"><span class="wpcf7-form-control-wrap submitted-file"><input type="file" name="submitted-file" value="1" size="40" class="wpcf7-form-control wpcf7-file" id="submitted-file-1"></span></td>
<td><span class="wpcf7-form-control-wrap number-of-copies"><input type="text" name="number-of-copies" value="" size="40" class="wpcf7-form-control wpcf7-text small-text" id="number-of-copies-1"></span></td>
<td><span class="wpcf7-form-control-wrap checkbox-copy-type"><span class="wpcf7-form-control wpcf7-checkbox" id="copy-type-1"><span class="wpcf7-list-item"><input type="checkbox" name="checkbox-copy-type[]" value="color">&nbsp;<span class="wpcf7-list-item-label">color</span></span><span class="wpcf7-list-item"><input type="checkbox" name="checkbox-copy-type[]" value="bw">&nbsp;<span class="wpcf7-list-item-label">bw</span></span><span class="wpcf7-list-item"><input type="checkbox" name="checkbox-copy-type[]" value="transperant">&nbsp;<span class="wpcf7-list-item-label">transperant</span></span><span class="wpcf7-list-item"><input type="checkbox" name="checkbox-copy-type[]" value="pergament">&nbsp;<span class="wpcf7-list-item-label">pergament</span></span></span></span></td>
<td><span class="wpcf7-form-control-wrap submitted-remarks"><input type="text" name="submitted-remarks" value="" size="40" class="wpcf7-form-control wpcf7-text" id="submitted-remarks-1"></span> </td>
    </tr></tbody></table>
    <button id="add_row">Add new</button>
</div>

JS:

jQuery("#add_row").click(function() {
    var row = jQuery("#k99_the_work tbody > tr:last"),
        newRow = row.clone(true);

    newRow.find("input[type=text],input[type=file]").each(function() {
        var num = +(this.id.match(/\d+$/) || [0])[0] + 1;
        this.id = this.id.replace(/\d+$/, "") + num;
        this.name = this.id;
    });

    newRow.insertAfter(row);
    return false;
});

ビンからわかるように、スクリプトは input=text で正常に動作し、名前と ID の両方が増加していますが、私の問題は、チェックボックスを処理する方法です。個別の配列を維持しながら、名前、ID などをインクリメントする必要がありますcheckbox-copy-type[]。意味、複製後にcheckbox-copy-type-1[]必要checkbox-copy-type-2[]など

私は決して正規表現の人ではありませんが、追加してみました：

newRow.find("input[type=checkbox]").each(function() {
    var num = +(this.id.match(/checkbox-copy-type/) || [0])[0] + 1;
    //      this.id = this.name.replace(/\[]/, "vv") + num;
    this.id = this.name.replace(/\[]/, "") + num;// take off the brackets
    this.id = this.name + "[]" ;// add the brackets again
    this.name = this.id;
});

しかし、これを試したときに得られるのは、別のブラケットのセットですcheckbox-copy-type[][]。checkbox-copy-type[][][]

4

2 に答える 2

1

アイテムを html のデータ部分に格納し (tr/checkbox ごとに一意の場合)、そのように取得してインクリメントし、括弧を追加することができます。

HTML

 <tr data-name="myName"></tr>

JavaScript

newRow.find("input[type=checkbox]").each(function(x, item) {
    var name = $(item).data('name'); //this give you the name if it unique
    var newName = name + x + '[]' // this give final result
});
于 2013-09-06T19:15:42.087 に答える