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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    May 2011
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Exclamation adding table fields dynamically

    Hello, I want to add rows and columns on click. So, i have a table with columns and rows and I had a add and remove button. So I want the user to be able to add/remove more rows if they have multiple inputs/outputs.

    So what I want is when the user clicks on add.png, I want another row of Input and Description to appear underneath the current one.

    Here is my code..

    Code:
    <img src="images/add.png" width="15" height="15" align="right" >
        <div class="open">
        
        <table width="200" border="0">
      <tr>
        <td class="propertyCol">Input:&nbsp;</th>
        <td class="propertyCol"><input class="text ui-widget-content ui-corner-all" value="" style="width:210px"></input></th>
        <td class="propertyCol">Description:&nbsp;</th>
        <td class="propertyCol"><textarea name="" cols="45" rows="1" class="text ui-widget-content ui-corner-all"></textarea>&nbsp;</th>
        <td class="propertyCol"><a href="javascript:removeElement();" ><img src="images/remove.png" alt="" width="15" height="15" /></a>&nbsp;</th>
      </tr>
    </table>
        <table width="200" border="0">
      <tr>
        <td class="propertyCol">Output:&nbsp;</th>
        <td class="propertyCol"><input class="text ui-widget-content ui-corner-all" style="width:200px"></input></th>
        <td class="propertyCol">Description:&nbsp;</th>
        <td class="propertyCol"><textarea name="" cols="45" rows="1" class="text ui-widget-content ui-corner-all"></textarea>&nbsp;</th>
        <td class="propertyCol"><a href="javascript:removeElement();" ><img src="images/remove.png" alt="" width="15" height="15" /></a>&nbsp;</th>
      </tr>
    </table>
    </div

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,513
    Thanks
    3
    Thanked 504 Times in 491 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script type="text/javascript">
    /*<![CDATA[*/
    function addRow(id){
     var tbdy=document.getElementById(id).getElementsByTagName('TBODY')[0],clone=tbdy.getElementsByTagName('TR')[0].cloneNode(true),ips=clone.getElementsByTagName('INPUT'),z0=0,tas=clone.getElementsByTagName('TEXTAREA'),z1=0;
     for (;z0<ips.length;z0++){
      ips[0].value='';
     }
     for (;z1<tas.length;z1++){
      tas[0].value='';
     }
     clone.getElementsByTagName('IMG')[0].onmouseup=function(){  removeElement(this);  }
     tbdy.appendChild(clone);
    }
    
    function removeElement(obj){
     while (obj.parentNode&&obj.nodeName.toUpperCase()!='TR'){
      obj=obj.parentNode;
     }
     obj.parentNode.removeChild(obj);
    }
    
    
    /*]]>*/
    </script></head>
    
    <body>
    <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="15" height="15" align="right" onmouseup="addRow('t1')" >
        <div class="open">
    
        <table width="200" border="0" id="t1" >
      <tbody>
      <tr>
        <td class="propertyCol">Input:&nbsp;</th>
        <td class="propertyCol"><input class="text ui-widget-content ui-corner-all" value="" style="width:210px"></input></th>
        <td class="propertyCol">Description:&nbsp;</th>
        <td class="propertyCol"><textarea name="" cols="45" rows="1" class="text ui-widget-content ui-corner-all"></textarea>&nbsp;</th>
        <td class="propertyCol"><a href="javascript:" ><img src="images/remove.png" alt="" width="15" height="15" /></a>&nbsp;</th>
      </tr>
      </tbody>
    </table>
    </div>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    dmacndawk (07-14-2011)

  • #3
    New to the CF scene
    Join Date
    May 2011
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Ok now I have another problem..I have a table inside the table and the user has to be able to add/remove Plans and Components.. Basically they can have multiple Components for one Plan. and should be able to create a new Plan too.

    Code:
           
    <table width="100%" class="text ui-widget-content ui-corner-all">
      <tr>
        <td><span class="sectionTitle"> Plans </span></td>
        <td><img src="images/add.png" width="15" height="15" align="right" /></td>
     </tr>
     
     <tr><td colspan="3"><hr /></td></tr>
      <tr>
      <td>&nbsp;</td>
        <td><img src="images/remove.png" width="15" height="15" align="right" /></td>
      </tr>
     
      <tr>
        <td class="propertyCol">Name:</td>
        <td><input name="pricePlanName" class="text ui-widget-content ui-corner-all" style="width:250px"/></input></td>
      </tr>
     
      <tr>
        <td class="propertyCol">Description:</td>
        <td><input name="pricePlanDescription" class="text ui-widget-content ui-corner-all" style="width:250px"/></input></td>
      </tr>
     
      <tr>
      	<td class="propertyCol">Currency:</td>
              <td><select style="width: 50px;">
                <option>Euros</option>
                <option>US Dollars</option>
                <option>UK Pounds</option>
              </select><br /><br /></td>
      </tr>
      
    <tr>
    <td class="sectionTitle">Components</td>
    <td><img src="images/add.png" width="15" height="15" align="right"  /></td>
    </tr>
    
     <tr><td colspan="3"><hr /></td></tr>
      <tr>
      	<td>&nbsp;</td>
        <td><img align="right" src="images/remove.png" width="15" height="15" /></td>
      </tr>
      <tr>
        <td class="propertyCol">Type:</td>
        <td><form id="form">
          <select name="jumpMenu" id="jumpMenu" onchange="MM_jumpMenu('parent',this,0)">
            <option>Fixed Price</option>
            <option>Price Per Call</option>
          </select>
        </form></td>
      </tr>
      <tr>
        <td class="propertyCol">Price:</td>
        <td><input value="" size ="8" id="fixedPrice">
        <select style="width: 80px;">
                <option>per month</option>
                <option>per year</option>
              </select></td>
      </tr>
      <tr>
    	  <td class="propertyCol">Capability:</td>
      	<td><select style="font-size:1.2em;">
          <option>Capability 1</option>
          <option>Capability 2</option>
          <option>Capability 3</option>
          <option>Capability 4</option>
          <option>Capability 5</option>
        </select> <br />
        </td>
     </tr>
      
    </table>


  •  

    Posting Permissions

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