1. USE JS
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
2. INSIDE DOCUMENT.READY
//START 2
//NEW CLONED ELEMENT ADDED ON CLICKING
$("#imgAdd").click(function () {
$("#tblTest").find("tr:last").after($("#tblTest").find("tr:last").clone());
//IF YOU WANT TO FILL NEWILY CLONED THING WITH A TEXT
//$("#tblTest").find("tr:last").find("input:text").val("hello test");
});
// REMOVING LAST ADDED ITEM
$("#imgRemove").click(function () {
if ($("#tblTest").find("tr:first").nextAll().length >= 1) {
$("#tblTest").find("tr:last").remove();
}
});
//END 2
//IF TO REMOVE ALL CLONED ELEMENTS USE
//$("#tblTest").find("tr:first").remove();
3. ON THE BODY TAG
<table id="tblTest">
<tr>
<td>
Your text here <input type="text" /> </td>
</tr>
</table>
<img alt="" src="../Images/add.gif" id="imgAdd"/>
<img alt="" src="../Images/remove.png" id="imgRemove"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
2. INSIDE DOCUMENT.READY
//START 2
//NEW CLONED ELEMENT ADDED ON CLICKING
$("#imgAdd").click(function () {
$("#tblTest").find("tr:last").after($("#tblTest").find("tr:last").clone());
//IF YOU WANT TO FILL NEWILY CLONED THING WITH A TEXT
//$("#tblTest").find("tr:last").find("input:text").val("hello test");
});
// REMOVING LAST ADDED ITEM
$("#imgRemove").click(function () {
if ($("#tblTest").find("tr:first").nextAll().length >= 1) {
$("#tblTest").find("tr:last").remove();
}
});
//END 2
//IF TO REMOVE ALL CLONED ELEMENTS USE
//$("#tblTest").find("tr:first").remove();
3. ON THE BODY TAG
<table id="tblTest">
<tr>
<td>
Your text here <input type="text" /> </td>
</tr>
</table>
<img alt="" src="../Images/add.gif" id="imgAdd"/>
<img alt="" src="../Images/remove.png" id="imgRemove"/>
No comments:
Post a Comment