使用 JQuery 克隆表单中的表部分答案

【问题标题】：Cloning table section within a form, using JQuery使用 JQuery 克隆表单中的表部分
【发布时间】：2018-06-27 16:45:21
【问题描述】：

我在表格中有一个表格，表格中有一个部分我需要为用户保持可重复性，这样我就可以给他添加更多部分的机会，如果他愿意的话。

我正在用 JQuery 做这个。

我的部分 HTML 代码在这里：

            <div id="entry1" class="clonedInput">
                <tr>
                    <td class="title" align="right">
                        <div id="reference" name="reference" class="heading">TITLE</div>
                    </td>
                </tr>

                <tr>
                    <td align="right"><label class="label_ol" for="local">Observation       Local</label></td>
                    <td><input type="text" name="local" class="input_ol" id="local" size="50"></td>

                    <td align="right"><label class="input_et" for="effect_type">Effect Type</label><br></td>
                    <td>
                        <select name="effect_type" class="input_et" id="effect_type">
                            <option value="0">OPT1</option>
                            <option value="1">OPT2</option>
                        </select>
                    </td>
                </tr>
            </div>

            <tr>
                <td colspan="4">
                    <div id="addDelButtons" align="right">
                        <input type="button" id="btnAdd" value="Adicionar Reação">
                        <input type="button" id="btnDel" value="Remover Reação">
                    </div>
                </td>
            </tr>

我的 JQuery：

$("#btnAdd").click(function () {
    var num     = $(".clonedInput").length; // how many "duplicatable" input fields we currently have
        newNum  = new Number(num + 1);      // the numeric ID of the new input field being added
        newElem = $("#entry" + num).clone().attr("id", "entry" + newNum).fadeIn("slow"); // create the new element via clone(), and manipulate it's ID using newNum value
                                                                                        // manipulate the name/id values of the input inside the new element
    // Título
    newElem.find(".heading").attr("id", "ID" + newNum + "_reference").attr("name", "ID" + newNum + "_reference").html("C2. Reaction no " + newNum);
    alert(newElem.find(".heading").html());
    // 1º Input
    newElem.find('.label_ol').attr('for', 'local' + newNum);
    newElem.find('.input_ol').attr('id', 'local' + newNum).attr('name', 'local' + newNum).val('');

    // 2º Input
    newElem.find('.label_et').attr('for', 'effect_type' + newNum);
    newElem.find('.input_et').attr('id', 'effect_type' + newNum).attr('name', 'effect_type' + newNum);

    // insert the new element after the last "duplicatable" input field
    $('#entry' + num).after(newElem);
    $('#ID' + newNum + '_title').focus();

    // enable the "remove" button
    $('#btnDel').attr('disabled', false);

    // right now you can only add 5 sections. change '5' below to the max number of times the form can be duplicated
    if (newNum == 5)
    $('#btnAdd').attr('disabled', true).prop('value', "You've reached the limit.");
});

我想要做的只是克隆包含我想要重复的部分的 div，为每个输入提供新的属性值（因此数据不会在数据库中混乱）并附加“母亲” div 之后的部分。由于某种原因，它不起作用。提前谢谢大家！

JSFiddle Here

【问题讨论】：

我做了类似的事情，我发现解决了很多令人头疼的问题是 1）委派任何事件侦听器和 2）不为表单字段分配名称，然后在提交事件侦听器中函数遍历行并根据行分配名称。
@TinyGiant 我确信这是最好的方法，但我没有太多时间重新编写所有代码。检查我想出的解决方案，如下。
如果它有效，它就有效。

标签： javascript php jquery html-table

【解决方案1】：

对于那些想知道我是否有解决方案的人，我确实做到了。远非最佳解决方案，但由于截止日期，我需要提供一个快速解决方案。

所以，基本上，我没有用<div> 包装我想重复的块并将其克隆为一个整体，而是为每组<tr></tr> 赋予不同的ID，克隆这些组的内容，添加新元素一起（使用 .add() 方法）并将结果附加到最后一个克隆集之后。出于某种原因，这不适用于<div>，我不知道为什么。

Here 是工作的 JSFiddle。

【讨论】：