...

View Full Version : adding table fields dynamically



dmacndawk
07-13-2011, 03:49 PM
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..


<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

vwphillips
07-13-2011, 04:21 PM
<!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('TEXTAR EA'),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>

dmacndawk
07-14-2011, 02:24 PM
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.



<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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum