如何将具有自动递增 id 的表单元素克隆到所有元素

Question

我在 .我想克隆它并在另一个中动态附加，以此类推。此外，我还需要为所有表单元素分配自动递增的 id。除了纯 javascript，我不能使用任何 jQuery 或任何其他库。

这是我的 HTML

<tr id="repeat">
    <td><input type="text" id="fieldName" /></td>
    <td>
        <select name="fieldType" id="fieldType">
            <option value="string">String</option>
        </select>
    </td>
    <td><input type="radio" id="mandatory" name="mandatory" value="true" /><input type="radio" id="mandatory" name="mandatory" value="false" /></td>
    <td>Delete Button</td>
</tr>

这是我的 JavaScript

var i = 0;

this.view.findById("start").addEventHandler("click", function () {
    var original = document.getElementById('repeat');
    var clone = original.cloneNode(true);
    original.parentNode.appendChild(clone);
})

目前我可以动态克隆<tr id="repeated1">中的表单元素等等，但无法将自动递增的id分配给输入框和选择框。也无法为单选按钮动态分配自动递增名称

Answer 1

您可以根据需要更改Id 或其他属性。

但是对于您的代码，我的解决方案是使用 querySelectorAll 来获取元素并更改它的 ID，类似于下面的代码，它已经过测试并且效果很好：

基于此HTML设计代码和JS函数：

function MakeElementsWithDifferentId() {
        for (var i = 1; i < 10; i++) {
             var original = document.getElementById('repeat');
             var clone = original.cloneNode(true);
             clone.id="repeat"+i;
             clone.querySelectorAll('[id="fieldName"]')[0].id ="fieldName"+i; 
             clone.querySelectorAll('[id="fieldType"]')[0].id ="fieldType"+i; 
             clone.querySelectorAll('[id="mandatory"]')[0].id ="mandatory"+i; 
             clone.children[2].children[0].name="mandatoryName"+i; //To change the radio name also
             original.parentNode.appendChild(clone);
        }
    }
    MakeElementsWithDifferentId();

  <table>
        <tr id="repeat">
            <td><input type="text" id="fieldName" /></td>
            <td>
                <select name="fieldType" id="fieldType">
                    <option value="string">String</option>
                </select>
            </td>
            <td><input type="radio" id="mandatory" name="mandatory" value="true" /> </td>
            <td>Delete Button</td>
        </tr>
    </table>

MakeElementsWithDifferentId() 函数生成 10 个具有不同 ID 的批处理元素。

JSFiddle Test

运行后，您可以右键单击您想要的元素并通过检查元素查看Id。

注意：

而不是clone.querySelectorAll('[id="fieldName"]')[0]，最好通过querySelector 获取元素，例如clone.querySelector('[id="fieldName"]')

希望能帮到你。