针对迭代的克隆表单输入 ID

Question

所以我在这里遵循了答案： 如何在单击添加按钮时复制完整表单（+加号）

该功能按我的需要工作，但我需要以克隆的 ID 为目标并对其进行迭代，就像对“添加表单”ID 进行迭代一样，这样我就可以收集它们的输入值并将它们输入到 email 响应中。 目前它只使用每个的最新输入并替换它们，因为它们都共享相同的 ID。

JS

document.getElementById("add").onclick = duplicate;
var i = 0;
var original = document.getElementById("add-form");

function duplicate() {
  var clone = original.cloneNode(true); // "deep" clone
  clone.id = "add-form" + ++i; // there can only be one element with an ID
  original.parentNode.appendChild(clone);
}

HTML

<table class="table" id="myTable" style="width: 100%;">
        <tr style="background-color: #E1E1E1;">
            <th style="color: #000 !important;">Service Type</th>
            <th style="color: #000 !important;">Outside<br>
            Diameter</th>
            <th style="color: #000 !important;">Thickness<br>
            of Insulation (mm)</th>
            <th style="color: #000 !important;">Single<br>
            Penetration</th>
            <th style="color: #000 !important;">Multi-Service<br>
            Penetration</th>
            <th style="color: #000 !important;">Formed<br>
            Letterbox</th>
        </tr>
        <tr id="add-form">
            <td><select id="Service Type" name="Service Type">
                <option style="display:none">
                    Please select service type*
                </option>
                <option value="Plastic pipe">
                    Plastic pipe
                </option>
                <option value="Insulated metal pipe">
                    Insulated metal pipe
                </option>
                <option value="Un-insulated metal pipe">
                    Un-insulated metal pipe
                </option>
                <option value="Plastic vent duct">
                    Plastic vent duct
                </option>
                <option value="Electric cable, tray or basket">
                    Electric cable, tray or basket
                </option>
                <option value="Electrical cable trunking">
                    Electrical cable trunking
                </option>
                <option value="Conduits with cables">
                    Conduits with cables
                </option>
                <option value="CPVC sprinkler pipe">
                    CPVC sprinkler pipe
                </option>
                <option value="Gas Trac pipe">
                    Gas Trac pipe
                </option>
                <option value="Insulated plastic pipe">
                    Insulated plastic pipe
                </option>
            </select></td>
            <td><input class="form-control" id="outside diameter" name="outside diameter" placeholder="*in mm" type="text" value="'.$pb-&gt;g('outside diameter').'"></td>
            <td><input class="form-control" id="thickness" name="thickness" placeholder="*in mm" type="text" value="'.$pb-&gt;g('thickness').'"></td>
            <td><select id="Single Penetration" name="Single Penetration" style="width: 100%;">
                <option value="Yes">
                    Yes
                </option>
                <option value="No">
                    No
                </option>
            </select></td>
            <td><select id="Multi-service Penetration" name="Multi-Service Penetration" style="width: 100%;">
                <option value="Yes">
                    Yes
                </option>
                <option value="No">
                    No
                </option>
            </select></td>
            <td><select id="Formed Letterbox" name="Formed Letterbox" style="width: 100%;">
                <option value="Yes">
                    Yes
                </option>
                <option value="No">
                    No
                </option>
            </select></td>
        </tr>
    </table><!-- <div class="form-group" id="technical-row-anchor" style="background-color: #E1E1E1"></div> -->
    <div>
        <button class="btn btn-light" id="add" type="button">Add Row</button>
    </div>

我对 JS 相当陌生，因此非常感谢任何帮助。

Answer 1

duplicate () function 仅序列化 id #add-form 。 属于每个#add-form*的孩子的所有 id 彼此相同。 当然，重复的 id 是无效的 HTML 并且您正在经历这样的后果。

您可以像#add-form一样序列化每个 id：

clone.id = "add-form" + ++i;
// for any child element of add-form*
const lbox = clone.getElementById("letterbox");
lbox.id = "letterbox" + ++i;

这是一个糟糕的主意，因为有很多元素具有不必要和无效的 id。 更好的选择是删除所有 id 并使用 id #add-form*来指定目标元素。

const lbox3 = document.getElementById("add-form3").querySelector("[name='letterbox']");
// Reference the element with name="letterbox" of the third #add-form

正如您所看到的，使用[name]属性有点笨重，如果向每个元素添加 class 会更容易一些。

const lbox3 = document.getElementById("add-form3").querySelector(".letterbox");
// Referencing by class is easier to read

此外，许多#id和[name]是无效的——它们不能有任何空格（例如。 多业务渗透应该像multi-service一样简单）。 此外，以小写字母开头 class、id、名称等被认为是一种很好的命名模式。

示例 1使用标准 DOM API 来访问特定元素（无#id ）。 示例 2使用HTMLFormElement和HTMLFormControlsCollection接口来访问表单控件（ <input> 、 <select>和<button>是 OP 中存在的表单控件）。 请注意， <form>应该包裹在所有内容中。

示例 1（ #id被移除）

 document.getElementById("add").onclick = duplicate; let i = 0; const original = document.getElementById("add-form"); function duplicate() { const clone = original.cloneNode(true); // "deep" clone clone.id = "add-form" + ++i; // there can only be one element with an ID original.parentNode.appendChild(clone); } // For demo purposes only for (let i=0; i < 5; i++) { document.getElementById("add").click(); } // Collect all <tr> into a NodeList const aforms = document.querySelectorAll('tr'); // Find the third <tr> and change the color of the text in that specific letterbox aforms[2].querySelector('[name="letterbox"]').style.color = "red";

 <table class="table" style="width: 100%;"> <tr style="background-color: #E1E1E1;"> <th>Service Type</th> <th>Outside<br> Diameter</th> <th>Thickness<br> of Insulation (mm)</th> <th>Single<br> Penetration</th> <th>Multi-Service<br> Penetration</th> <th>Formed<br> Letterbox</th> </tr> <tr id="add-form"> <td><select name="service"> <option selected disabled> Please select service type* </option> <option> Plastic pipe </option> <option> Insulated metal pipe </option> <option> Un-insulated metal pipe </option> <option> Plastic vent duct </option> <option> Electric cable, tray or basket </option> <option> Electrical cable trunking </option> <option> Conduits with cables </option> <option> CPVC sprinkler pipe </option> <option> Gas Trac pipe </option> <option> Insulated plastic pipe </option> </select></td> <td><input class="form-control" name="diameter" placeholder="*in mm" type="text" value="'.$pb-&gt;g('outside diameter').'"></td> <td><input class="form-control" name="thickness" placeholder="*in mm" type="text" value="'.$pb-&gt;g('thickness').'"></td> <td><select name="single" style="width: 100%;"> <option> Yes </option> <option> No </option> </select></td> <td><select name="multi-Service" style="width: 100%;"> <option> Yes </option> <option> No </option> </select></td> <td><select name="letterbox" style="width: 100%;"> <option> Yes </option> <option> No </option> </select></td> </tr> </table> <div> <button class="btn btn-light" id="add" type="button">Add Row</button> </div>

示例 2（删除#id并使用了 HTMLFormElement 和 HTMLFormControlsCollection 接口）

 // Reference the <form> const main = document.forms.main; // Reference all form controls (all <input>, <select>, and <button>) const fc = main.elements; fc.add.onclick = duplicate; let i = 0; const original = document.querySelector("#add-form"); function duplicate() { var clone = original.cloneNode(true); // "deep" clone clone.id = "add-form" + ++i; // there can only be one element with an ID original.parentElement.append(clone); } // For demo purposes only for (let i = 0; i < 5; i++) { fc.add.click(); } // Reference all [name="letterbox"] const lboxes = fc.letterbox; // Change the color of the text of the third [name="letterbox"] lboxes[2].style.color = "red";

 <form id="main"> <table class="table" style="width: 100%;"> <tr style="background-color: #E1E1E1;"> <th>Service Type</th> <th>Outside<br> Diameter </th> <th>Thickness<br> of Insulation (mm)</th> <th>Single<br> Penetration </th> <th>Multi-Service<br> Penetration </th> <th>Formed<br> Letterbox </th> </tr> <tr id="add-form"> <td> <select name="service"> <option selected disabled> Please select service type* </option> <option> Plastic pipe </option> <option> Insulated metal pipe </option> <option> Un-insulated metal pipe </option> <option> Plastic vent duct </option> <option> Electric cable, tray or basket </option> <option> Electrical cable trunking </option> <option> Conduits with cables </option> <option> CPVC sprinkler pipe </option> <option> Gas Trac pipe </option> <option> Insulated plastic pipe </option> </select> </td> <td><input class="form-control" name="diameter" placeholder="*in mm" type="text" value="'.$pb-&gt;g('outside diameter').'"></td> <td><input class="form-control" name="thickness" placeholder="*in mm" type="text" value="'.$pb-&gt;g('thickness').'"></td> <td> <select name="single" style="width: 100%;"> <option> Yes </option> <option> No </option> </select> </td> <td> <select name="multi-Service" style="width: 100%;"> <option> Yes </option> <option> No </option> </select> </td> <td> <select name="letterbox" style="width: 100%;"> <option> Yes </option> <option> No </option> </select> </td> </tr> </table> <div> <button class="btn btn-light" id="add" type="button">Add Row</button> </div> </form>