PDA

View Full Version : Table of Inputs Auto New Row



Badman3k
Nov 13th, 2008, 03:17 PM
I want to develop a table of inputs to take the details of items to be ordered. The table at present looks like this:
|Qty|Units|Description|Unit Price|Cost|
Where all the fields are text boxes except description which is a textarea.

I've been using the following source code:

<table>
<tbody>
<tr>
<th>Qty</th>
<th>Units</th>
<th>Description</th>
<th>Unit Price</th>
<th>Cost</th>
</tr>
<tr>
<td><input type='text' id='Qty[]' name='Qty[]' /></td>
<td><input type='text' id='Units[]' name='Units[]' /></td>
<td><textarea id='Description[]' name='Description[]'></textarea></td>
<td><input type='text' id='UnitPrice[]' name='UnitPrice[]' /></td>
<td><input type='text' id='Cost[]' name='Cost[]' /></td>
</tr>
</tbody>
</table>

What I want is to build a JS function that I can assign to each of the inputs that will check to see whether or not it is the last row in the table and if so add a new row after it. It will do this when the field gets the focus and will only create one empty-fields row.

The idea is to always have a set of inputs that are empty.

Any help on this matter would be appreciated.

vwphillips
Nov 13th, 2008, 07:06 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 language="JavaScript" type="text/javascript">
/*<![CDATA[*/
function NewRow(row){
var p=row.parentNode;
var rows=p.getElementsByTagName('TR')
row=rows[rows.length-1];
var ips=row.getElementsByTagName('INPUT')
for (var zxc0=0;zxc0<ips.length;zxc0++){
if (ips[zxc0].value.replace(/\s/g,'').length==0){
return;
}
}
var tas=row.getElementsByTagName('TEXTAREA')
for (var zxc1=0;zxc1<tas.length;zxc1++){
if (tas[zxc1].value.replace(/\s/g,'').length==0){
return;
}
}
row.onmouseout=null
row=row.cloneNode(true);
row.onmouseout=function(){ NewRow(this); }
ips=row.getElementsByTagName('INPUT')
for (var zxc2=0;zxc2<ips.length;zxc2++){
ips[zxc2].value='';
}
tas=row.getElementsByTagName('TEXTAREA')
for (var zxc3=0;zxc3<tas.length;zxc3++){
tas[zxc3].value='';
}
p.appendChild(row);
}
/*]]>*/
</script></head>

<body>
<table>
<tbody>
<tr>
<th>Qty</th>
<th>Units</th>
<th>Description</th>
<th>Unit Price</th>
<th>Cost</th>
</tr>
<tr onmouseout="NewRow(this);" >
<td><input type='text' id='Qty[]' name='Qty[]' /></td>
<td><input type='text' id='Units[]' name='Units[]' /></td>
<td><textarea id='Description[]' name='Description[]'></textarea></td>
<td><input type='text' id='UnitPrice[]' name='UnitPrice[]' /></td>
<td><input type='text' id='Cost[]' name='Cost[]' /></td>
</tr>
</tbody>
</table>
</body>

</html>

Badman3k
Nov 17th, 2008, 12:24 PM
Vic,

Thanks for the response, I've not been able to try it out and see if it works, but from looking at the code, I don't see why it wouldn't.

Thanks a million.