Hello!
I have been working on a dynamic solution for a web based purchase order system. When i enter a purchase order i am greeted with:
[IMG]http://nenuno.co.uk/temp/12-rows.jpg[/IMG]
And i have started to code a solution where I can add rows when I need them!
Inspiration is:
[IMG]http://nenuno.co.uk/temp/example.jpg[/IMG]
The code I have so far is:
<html>
<head>
<script type='text/javascript'>
var emptyRow = null;
function init() {
var table = document.getElementById( 'insertorder' );
var tbody = table.getElementsByTagName( 'TBODY' )[ 0 ];
var tr = tbody.firstChild;
while ( tr && tr.nodeName != 'TR' ) {
tr = tr.nextSibling;
}
emptyRow = tr.cloneNode( true );
}
function AddRow() {
var table = document.getElementById( 'insertorder' );
var tbody = table.getElementsByTagName( 'TBODY' )[ 0 ];
var numRows = tbody.rows.length;
var where = tbody.rows[ numRows - 1 ];
var newRow = emptyRow.cloneNode( true );
insertAfter( where, newRow );
}
function insertAfter( here, newNode ) {
here.parentNode.insertBefore( newNode, here.nextSibling );
}
</script>
</head>
<body onload='init()'>
<table border='1' id='insertorder'>
<thead>
<tr>
<th>Part Number</th>
<th>Description</th>
<th>Qty</th>
<th>Unit Cost</th>
</tr>
</thead>
<tbody>
<tr>
<th><input type='text' size='10'></th>
<th><input type='text' size='20'></th>
<th><input type='text' size='5'></th>
<th><input type='text' size='5'></th>
</tr>
</tbody>
</table><br>
<input type='button' value='AddRow' onclick='AddRow()'>
</body>
</html>Currently each row has a unique reference
Partnumber line 1 is "l1pn" line 2 is "l2pn" and so on till 12
Description line 1 is "l1desc" line 2 is "l2desc" and so on till 12
etc etc
What else do I need to add to the above code to make it when i add a new row that the row reference changes from "l1pn" to "l2pn" etc and limit it to creating 12 rows only.
Many thanks in advance