Question

我是JavaScript和jQuery的新手。我使用这个jQuery脚本在html表下面克隆：

$("#table1").clone().appendTo("#div1");

这是我的html表：

<div id="div1">
        <table border="1" id="table1">
        <tr>
            <td colspan="5">Question text will be here</td>
        </tr>
        <tr>
            <td><input type="radio" id="A" name="ans" />answer1 <br /></td>
            <td><input type="radio" id="B" name="ans" />answer2 <br /></td>
            <td><input type="radio" id="C" name="ans" />answer3 <br /></td>
            <td><input type="radio" id="D" name="ans" />answer4 <br /></td>
            <td><input type="radio" id="E" name="ans" />answer5 <br /></td>
        </tr>
        </table>

        <table border="1" id="table1">
        <tr>
            <td colspan="5">Question text will be here</td>
        </tr>
        <tr>
            <td><input type="radio" id="A" name="ans" />answer1 <br /></td>
            <td><input type="radio" id="B" name="ans" />answer2 <br /></td>
            <td><input type="radio" id="C" name="ans" />answer3 <br /></td>
            <td><input type="radio" id="D" name="ans" />answer4 <br /></td>
            <td><input type="radio" id="E" name="ans" />answer5 <br /></td>
        </tr>
        </table>
    </div>

而现在，我正在努力改变clonned table和clonned radiobuttons的id。我需要更改clonned tables id属性，否则我无法在我的项目的后续步骤中选择它们。而且我还需要更改所有单选按钮的名称属性，因为我只能在浏览器上选择一个单选按钮。

我在此页面上阅读了有关.attr（）api的文档：http://api.jquery.com/attr/。所以我知道如何用jQuery更改html元素的属性，但我不知道，如何动态更改clonned html元素的这些属性。

请帮帮我吗？

Answer 1

下面的内容应该可以解决问题。 jsFiddle

$("#table1")
    .clone()
    .attr('id','table2')
    .appendTo("#div1");

$("#table2 :radio").each (function (index) {
    this.id = this.id + index;
    this.name = this.name + index;
});

如何更改克隆的html表和radiobutton的属性？

1 个答案: