如何动态更改克隆的radiobuttons名称属性?

时间:2012-02-10 14:08:09

标签: jquery

我有一个HTML表,它位于div元素内部,我想在用户点击按钮时生成该表的多个克隆。到目前为止,我可以生成表的无限克隆,我可以动态地更改表的id。

我的问题是,当我克隆表格时,我还克隆了其中的单选按钮。并且所有克隆的radiobutton都具有相同的name属性。我需要更改name属性,因为尽管我生成了克隆表,但我只能选择其中一个。

我在互联网上搜索,但大多数时候我发现了非工作的答案。这是我脚本的最新版本。你能帮我解决怎么做的事吗?

<html>
    <head>
        <title> clone table - 2 </title>

        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>

        <script type="text/javascript">
            $(document).ready(function() {  }); // jQuery is queried for DOM

            function clonetable () {
                var aydi = $('input#gizli').val();
                $table = $('table#tbl0').clone().attr('id', '#table'+aydi).appendTo("#div1");
                aydi++;
                $('input#gizli').val(aydi);     
            }
        </script>
    </head>

    <body>
        <input type="button" id="button1" name="clonner" value="clone table" onClick="clonetable()" />
        <input type="hidden" id="gizli" name="gizli" value="0" /> <br/> <br/>
        <div id="div1">
            <table border="1" id="tbl0" name="tbl0">
                <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>
    </body>
</html>

3 个答案:

答案 0 :(得分:2)

试试这个:

function clonetable() {
    var aydi = $('input#gizli').val();
    $table = $('table#tbl0').clone().attr('id', '#table' + aydi).appendTo("#div1");
    $("input[type='radio']", $table).prop("name", "ans_" + aydi);
    aydi++;
    $('input#gizli').val(aydi);     
}

Example fiddle

答案 1 :(得分:1)

以下是您要找的内容:

http://jsbin.com/avubog/edit#javascript,html

修改

$(function() {
  $("#Cloner").click(function() {
    var clone =$(".Target").first().clone();
    $("input", clone).attr("name", "AnotherName");
    $("body").append(clone);
  });
});

上面的代码使用了jquery的重载,其中第二个参数是选择发生的上下文。

答案 2 :(得分:0)

Here is what are you looking for:

clone table using jquery

希望这有助于解决您的要求