Question

我需要复制表单的行（在表格中）

请参阅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;
});

正如您从bin中看到的那样，脚本在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[][][]

Answer 1

你可以将项目存储在html的数据部分（如果它对每个tr /复选框唯一）以这种方式检索它然后递增它，然后添加括号。

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
});

Answer 2

我已经解决了这个问题：

newRow.find("input[type=checkbox]").each(function() {

var parentid = jQuery(this).parent().parent();
    var num = +(this.id.match(/checkbox-copy-type+$/) || [0])[0] + 1;
  this.id = this.name.replace(/\d+/, function(val) { return parseInt(val)+1; });
    this.name = this.id;
    parentid.attr("id",parentid.attr("id").replace(/\d+/, function(val) { return parseInt(val)+1; }));
});

处理重复表单字段集（正则表达式）中的数组ID递增数

2 个答案: