3

我的网页中有一个表格，该表格由一个表格组成，该表格中包含一个嵌套表格。当我尝试克隆嵌套表的行时，这些行没有被克隆。但是，克隆对于外部表工作正常。这是我的 HTML 代码 

<html lang="en">
        <head>
            <meta charset="utf-8">
        </head>

        <body>
        <div id="division">
            <form class="allergyrow">
                <table id="tab" border="1">
                    <thead>
                        <tr>
                            <th scope="col">Remove</th>
                            <th scope="col">Allergy</th>
                            <th scope="col">Reaction</th>
                            <th scope="col">Adverse Event Date</th>
                            <th scope="col">Comment</th>

                        </tr>
                    </thead>

                    <tbody>
                        <tr class="datarow">
                            <td><input type = "checkbox" id = "remove" class="remove" value = "Remove" /></td>
                            <td><input type = "text" id = "myText" class="myText" /></td>
                            <td >
                                <div>
                                <table id="inner" class="inner">
                                <tbody>
                                <tr id="innerrow" class="innerrow">
                                <td>
                                <select id = "myList" class="myList">
                                <option value = "1">Rashes</option>
                                <option value = "2">Shock</option>
                                <option value = "3">Asthma</option>
                                <option value = "4">Nausea</option>
                                <option value = "5">Anemia</option>
                                <option value = "6">Unknown/Other</option>
                                </select>
                                </td>
                                <td>
                                <select id = "reaction" class="reaction">
                                <option>Yes</option>
                                <option>Mild</option>
                                <option>Moderate</option>
                                <option>severe</option>
                                </select>
                                </td>
                                <td>
                                <button id="plus" class="plus">plus</button>
                                </td>
                                </tr>

                                </tbody>                            
                                </table>
                                </div>
                            </td>
                            <td><input type="date" id="eventdate" class="eventdate"/></td>
                            <td><input type="text" id="comment"  class="comment"/></td>

                    </tbody>
                </table>
            </form>
            <button id="submit">Submit</button>
            </div>

这是我用来克隆内表行的 Jquery 代码 

 $("#plus").click(function(){
            var row=$("#innerrow");
            row.clone().appendTo("#inner");
            s
         });

但是 JQuery 代码似乎不起作用，当我调试时，我可以看到正在创建克隆的行，然后它们消失了。谢谢你。

4

2 回答 2

1

ID应该是唯一的。当代码有效时，您将留下多个tr's具有相同 ID。尝试改用一个类

此外，您似乎使用的button是不唯一的按钮 id。您还需要用一个类替换它。

这里的主要问题是您需要委托事件。 当事件处理程序关联时，事件仅绑定到 DOM 中可用的元素。但是在您的情况下，发生这种情况时，您的克隆元素不存在。

将代码替换为并确保删除您认为将被克隆的元素的 id。

$("#inner").on('click', '.plus', function (e) {
    e.preventDeafault(); // Also need to call this to prevent form submission
    var row = $(".innerrow").first();
    row.clone().appendTo("#inner");
});

检查小提琴

于 2013-07-19T18:58:41.473 回答
0

在 HTML 文档中，不能有两个具有相同 ID 的元素。ID 必须是唯一的。因此，clone() 可能因此不起作用，您不能拥有两个相同的 ID

于 2013-07-19T19:00:02.003 回答