Menu
I have a form in my webpage and the form consists of a table which in return has a nested table in it. when I try to clone the rows of the nested table, the rows are not getting cloned. However the cloning works fine for the outer table. Here is my HTML code
<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>
Here is my Jquery code which I am using to clone the innertable rows
$("#plus").click(function(){
var row=$("#innerrow");
row.clone().appendTo("#inner");
s
});
but the JQuery code doesn't seem to be working, when I debug I can see that the cloned rows are being created and then they disappear. Thank you.
362
asked Mar 23 '26 02:03
ID's are supposed to be unique. When the code works , you will be left multiple tr's with the same id. Try using a class instead
Also you seem to be using the button which is the id of the button that is not unique. You need to replace that with a class as well.
The main problem here is you need to delegate the events. Events are only bound to elements that are available in the DOM when event handler is associated. But in your case your cloned element is not present when this happens.
Replace the code with and make sure you remove the id's for the elements that you think will be cloned.
$("#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");
});
Check Fiddle
116
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
