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

Its working perfectly fine , you can impose the limit like this -

var numRows = tbody.rows.length;
if(numRows >12)return false;

Many thanks network18,

The only issue remaining is that the first row has input names like l1pn, l1desc, l1qty and l1uc. When the second row is generated it doesn't seem to make it l2pn, l2desc, l1qty and 12uc etc, is there a way of doing this?

<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;
	if(numRows >12)return false;
    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='0' id='insertorder' style='width: 100%' align='center'>
    <thead>
      <tr>
        <th class='style5' style='width: 158px'>Part Number</th>
        <th class='style5' style='width: 525px'>Description</th>
        <th class='style5' style='width: 77px'>Qty</th>
        <th class='style5' style='width: 77px'>Unit Cost (<?php echo $currency; ?>)</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th style="height: 26px;"><input type="text" name='l1pn' size=20 style="width: 160px" class=""></th>
        <th style="height: 26px;"><input type="text" name='l1desc' size=200 style="width: 522px" class=""></th>
        <th style="height: 26px;"><input type="text" name='l1qty' size=20 style="width: 83px" class=""></th>
        <th style="height: 26px;"><input type="text" name='l1uc' size=20 style="width: 83px" class=""></th>
      </tr>
    </tbody>
  </table>
  	<br>
 		 <input type='button' value='Add a new line' onclick='AddRow()'>
		 <div align="center"><input type='Submit' value='Submit'></center></div>
</body>
</html>

Many thanks again!

tried something like below , but still it will take some more efforts to get it working -

function AddRow() {
    var table = document.getElementById( 'insertorder' );
    var tbody = table.getElementsByTagName( 'TBODY' )[ 0 ];
    var numRows = tbody.rows.length;
	if(numRows >12)return false;
    var where   = tbody.rows[ numRows - 1 ];
    var newRow  = emptyRow.cloneNode( true );
	for(var i=0; i<tbody.rows.length; i++)
	{
		var new_name = "l2pn";
		for(var j=0; j<tbody.rows[i].childNodes.length; j++)
		{
			alert(">>"+tbody.rows[i].childNodes[j].childName+">>");
			tbody.rows[i].childNodes[j].setAttribute('name',new_name);
    	}	

    }
	insertAfter( where, newRow, numRows );
  }
  function insertAfter( here, newNode, numRows) {
    here.parentNode.insertBefore( newNode, here.nextSibling );
	//var here_name = here.name;
	
	//alert(numRows+">>"+document.getElementByTagName('here.nextSibling'));
	
	//alert(">>"+here_name+">>"+here_name.substring(1,2));
	var newNode_name = '';
//	document.getElementByTagName('').style.name = 
  }
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.