Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4

Thread: add row clone

  1. #1
    Regular Coder
    Join Date
    May 2004
    Posts
    391
    Thanks
    76
    Thanked 0 Times in 0 Posts

    add row clone

    Hi all!

    I have a function that adds a row when clicked. It just clones the last row but it also copys the text in the fields if the user types any. Drop list work fine but I don't want to copt the text also. What can I do??

    Tracy




    Code:
    <script>
    function addRowClone(tblId)
    {
    var tblBody = document.getElementById(tblId).tBodies[0];
    var newNode = tblBody.rows[1].cloneNode(true);
    tblBody.appendChild(newNode);
    
    } 
    
    </script>
    
    <a onclick="addRowClone('testTable')" href="#" return false; >Click here to add rows</a>
    <table id="testTable" >
      <tr>
        <td >   
            <input type="text" name="T1" size="20">
            </td>     
        <td >
        <input type="text" name="T1" size="20"> 
         
        </td>
        <td>
        <select name="drop" size="1">
           
      <option value="">-Select Value-</option>
        <option value="honda">honda</option>
      <option value="toyota">toyota</option>
    </select>
        </td>
      </tr>
       <tr>
        <td >   
            <input type="text" name="T1" size="20">
            </td>
     
         
        <td >
        <input type="text" name="T1" size="20">       
         
        </td>
        <td>
        <select name="drop" size="1">
           
      <option value="">-Select Value-</option>
        <option value="honda">honda</option>
      <option value="toyota">toyota</option>
    </select>
        </td>
      </tr>
    
     
    </table>

  • #2
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    Code:
    <script>
    var newNode;
    var tblBody;
    function addRowClone(tblId)
    {
    tblBody.appendChild(newNode.cloneNode(true));
    } 
    function init(tblId){
    	tblBody = document.getElementById(tblId).tBodies[0];
    	newNode = tblBody.rows[1].cloneNode(true);
    };
    </script>
    <body onload="init('testTable')">
    <a onclick="addRowClone('testTable')" href="#" return false; >Click here to add rows</a>
    <table id="testTable" >
      <tr>
        <td >   
            <input type="text" name="T1" size="20">
            </td>     
        <td >
        <input type="text" name="T1" size="20"> 
         
        </td>
        <td>
        <select name="drop" size="1">
           
      <option value="">-Select Value-</option>
        <option value="honda">honda</option>
      <option value="toyota">toyota</option>
    </select>
        </td>
      </tr>
       <tr>
        <td >   
            <input type="text" name="T1" size="20">
            </td>
     
         
        <td >
        <input type="text" name="T1" size="20">       
         
        </td>
        <td>
        <select name="drop" size="1">
           
      <option value="">-Select Value-</option>
        <option value="honda">honda</option>
      <option value="toyota">toyota</option>
    </select>
        </td>
      </tr>
    
     
    </table>
    </body>

  • Users who have thanked DaveyErwin for this post:

    nikko50 (03-18-2012)

  • #3
    Regular Coder
    Join Date
    May 2004
    Posts
    391
    Thanks
    76
    Thanked 0 Times in 0 Posts
    Resolved. Thanks Davey!!
    Last edited by nikko50; 06-20-2012 at 05:15 PM.

  • #4
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    Code:
    <!doctype html>
    <html>
    <head>
    <title>Swap Rows</title>
    
    </head> 
    <body> 
    <table id="myTable" border="0" cellpadding="0" cellspacing="0" width="50%">
        <tr id="row1">
          <td width="50%">
            
              <input type="text" name="name" size="20">
            
          <td width="50%">
            
              <select size="1" name="cars">
              <option value="ford">ford</option>
              <option value="chevy">chevy</option>
             
              </select>
        </tr>
        <tr id="row2">
          <td width="50%"></td>
          <td width="50%"></td>
        </tr>
      </table>
      <table id="altTable" style="display:none;">
      <tr id="row3">
          <td width="50%"><input name="greetings" value="hiya"></td>
          <td width="50%"><select>
    <option value="Chys">Chysler</option>
              <option value="Honda">Honda</option>
              </select></td>
        </tr></table>
      
      
    <a onClick="swapRow();" href="#"> Click to Change Row</a> 
    <script>
    var row1 = document.getElementById("row1");
    var row3 = document.getElementById("row3");
    var altTable = document.getElementById("altTable");
    var myTable = document.getElementById("myTable");
    function swapRow(){
    	altTable.appendChild(row1);
    	myTable.appendChild(row3);
    }
    </script>
    
    </body></html>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •