Ad:

JavaScript / DHTML / AJAX Discussion Thread
Unsolved
Views: 1932

Nov 11th, 2009

Dynamic table rows

Expand Post »

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:

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

Similar Threads

help to send Dynamic table datas to MySQL base via PHP in PHP
Generated Table Rows in JavaScript / DHTML / AJAX
Dynamic Table Rows in JavaScript / DHTML / AJAX
Can we Filter DataSet.Table rows collection in VB.NET
Dynamic Table Creation in JavaScript / DHTML / AJAX

oku

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

11 posts
since May 2008

Permalink

Nov 12th, 2009

Re: Dynamic table rows

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

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;

network18

Reputation Points: 29

Solved Threads: 76

Practically a Master Poster

Offline

616 posts
since Sep 2009

Permalink

Nov 12th, 2009

Re: Dynamic table rows

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?

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!

oku

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

11 posts
since May 2008

Permalink

Nov 12th, 2009

Re: Dynamic table rows

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

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

network18

Reputation Points: 29

Solved Threads: 76

Practically a Master Poster

Offline

616 posts
since Sep 2009

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Cookies with javascript

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: java script program to find dates between two dates

DaniWeb Message

Cancel Changes

User Name
Password