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

运行后，您可以右键单击所需的元素，然后通过inspect元素查看Id。

注意：

而不是clone.querySelectorAll('[id="fieldName"]')[0]而不是像querySelector那样clone.querySelector('[id="fieldName"]')获取元素

希望能帮到你。

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

1 个答案: