Friday, May 25, 2012

Clone Function

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 &nbsp;<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