Basically, I have a button and a table that I want to clone when "Add new" button is pressed, and then append the cloned elements to the "items" container, but with updated id's and names - the update is done by appending the value of "num" attribute of "items". In the end I'll have to clone and update the id's and names for multiple input elements in the table found in the "default_container" - but right now it doesn't work even for direct children. HALP pls :(
The problem (one of them at least) right now is that the iteration over the children isn't performed.
The problem (one of them at least) right now is that the iteration over the children isn't performed.
$(document).ready(function() {
$
("#default_container").hide();
$
("#addnew").click(function(){
var num = eval($("#items").attr('num'));
$
("#items").attr('num',num + 1);
$
("#default_container").clone().children().andSelf().each(function(){
if($(this).attr('name')){
var newName = $(this).attr('name') + num;
$
(this).attr('name',newName);
}
var newId = $(this).attr('id') + num;
$
(this).attr('id',newId);
});
$
("items").append($("#default_container"+num).html());
});
});
</script>
</
head>
<body>
<button id=addnew>Add new</button>
<div id="default_container" >
<button id="ex" type=button> ExpandDef </
button>
<table id="extable" name="extable">
</table>
</
div>
<form action="testact.php">
<div id="items" num=1>
<button type=button id="ex0"> Expand </button>
<table id="extable0" name="extable0">
<tr>
<td><input name="box1" type=text></
input></td>
<td><input name=box2 type=text></input></td>
</tr>
<tr>
<td><input name="box3" type=text></
input></td>
<td><input name="box4" type=text></input></td>
</tr>
</
table>
</div>
<input type=submit></
input>
</form>
</
body>
</html>