处理重复表单字段集 (regex） 中数组 ID 的递增数

handle incrementing number of array ID in duplicated form field set (regex)

本文关键字：ID 数组 regex 表单 字段 处理      更新时间：2023-09-26

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

在这里查看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[][][]

您可以将项目存储在 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
});

我已经这样解决了它：

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; }));
});
相关文章：