Question

我有一个表格形式，我希望能够根据需要多次复制一组字段。而且我还想让那些新字段组的属性的字段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 - Jquery

$(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'时，我需要在'#repeatingSection'中重命名此代码html

修改： -

$(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插入新行

Answer 1

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

演示here

我改变了什么：

在html：class中替换为<a>元素中的ID，并在div中替换为#repeatingSection
在"

id="pro_1'+i+'[] class="regular-text"

在点击功能之外添加了var i = 0;，并在其中添加了i++;。
我还为<table>添加了开始和结束标记，也许您在未发布的代码中的其他位置添加了标记。我添加了正确的html标记。

通过jquery添加新的记录元素

1 个答案:

演示here