Question

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

我是用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

Answer 1

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

所以，基本上，我不是用<div>包裹我想要重复的块，而是整体克隆它，我只是给每一组<tr></tr>提供了不同的id，克隆这些集的内容，将新元素添加到一起（使用 .add（）方法）并在最后一个克隆集后附加结果。出于某种原因，这不是<div>，我不知道为什么。

Here正在运作的JSFiddle。

使用JQuery克隆表单中的表格部分

1 个答案: