1

我有一个表格，我希望能够根据需要多次复制一组字段。而且我还希望这些新字段组的属性的字段 id、名称和标签增加 1。到目前为止，我已经用 jQuery 尝试过这个，并让它至少复制字段组，但删除没有不行。而且我不确定如何为这三个属性中的每一个做 +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插入新行时

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: class 中替换为<a>元素中的 ID 和要附加到的 div 中#repeatingSection
  • 在此处添加"关闭 IDid="pro_1'+i+'[] class="regular-text"
  • 添加var i = 0;在点击功能之外和i++;里面。
  • 我还添加了开始和结束标签<table>，也许你在你没有发布的代码中的其他地方有它们。我添加只是为了拥有正确的 html 标记。
于 2013-10-20T17:15:53.507 回答