AJAX

Dynamic table rows

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: May 2008

Posts: 11

Reputation: oku is an unknown quantity at this point

Solved Threads: 0

oku

Offline

Newbie Poster

Dynamic table rows

34 Days Ago

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:

And i have started to code a solution where I can add rows when I need them!

Inspiration is:

The code I have so far is:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<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>
<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

•

Join Date: Sep 2009

Posts: 557

Reputation: network18 is an unknown quantity at this point

Solved Threads: 64

network18

Offline

Posting Pro

34 Days Ago

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

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
var numRows = tbody.rows.length;
if(numRows >12)return false;
var numRows = tbody.rows.length;
if(numRows >12)return false;

"The discipline of writing something down is the first step towards making it happen."

follow me on twitter

•

Join Date: May 2008

Posts: 11

Reputation: oku is an unknown quantity at this point

Solved Threads: 0

oku

Offline

Newbie Poster

34 Days Ago

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?

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<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>
<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!

•

Join Date: Sep 2009

Posts: 557

Reputation: network18 is an unknown quantity at this point

Solved Threads: 64

network18

Offline

Posting Pro

34 Days Ago

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

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  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 = 
  }
  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 = 
  }