<div>
Use 
elementNode.insertBefore(new_node,existing_node) 
using the first child node as a reference node 
 
.... 
document.getElementById(divname).insertBefore(newdiv,document.getElementById(divname).firstChild); 

</div>

<div>
hi, 
this seams to work 

<pre><code class="code-10 nolinks" id="code-20-35759061-1">function addRow(divname)
{
	
var totalrows = document.getElementById('invoice').rows.length-1;

var product = 'xxx';
var newdiv = document.createElement('tr');	
 newdiv.innerHTML = &quot;&lt;td&gt;&lt;strong&gt;&quot; + (totalrows + 1) + &quot;&lt;/strong&gt;&lt;/td&gt;&lt;td&gt;&lt;div class='field'&gt;&lt;select name='product[]' id='product'&gt;&lt;option selected='selected'&gt;&quot; + product + &quot;&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&quot;;
 document.getElementById(divname).appendChild(newdiv);
 
}
</code></pre>
</div>

<div>
oops :) 
replace xxx 
width &lt;?php echo $products; ?&gt;
</div>

<div>
if you need to start with 1 instead of 0 
var totalrows = document.getElementById('invoice').rows.length-1; 
should be 
var totalrows = document.getElementById('invoice').rows.length; 

</div>

<div>
using your method doesnt add up the rows it displays the following: 
 
&lt;table&gt; 
 
1 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;text here 
4 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;text here 
4 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;text here 
 
and I want it too display as follows: 
 
1 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;text here 
2 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;text here 
3 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;text here 
4 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;text here 
 
hope that makes sence 
</div>

<div>
Some notes: 
 
 
//the divname refers to a &quot;Table&quot; object or a &quot;DIV&quot; object?? 
function addRow(divname) 
{ 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
///what is the &quot;invoice&quot; element?? (table, div) it refers to the same &quot;divname&quot; parameter ??? 
var totalrows = document.getElementById('invoice').rows.length-1; 
 
///totalrows does not change length if it's not the &quot;divname&quot; object 
 
var product = 'xxx'; 
var newdiv = document.createElement('tr'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp; &nbsp; newdiv.innerHTML = &quot;&lt;td&gt;&lt;strong&gt;&quot; + (totalrows + 1) + &quot;&lt;/strong&gt;&lt;/td&gt;&lt;td&gt;&lt;div class='field'&gt;&lt;select name='product[]' id='product'&gt;&lt;option selected='selected'&gt;&quot; + product + &quot;&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;&quot;; 
 
// the row is added to the divname element (and maybe it should be the same &quot;invoice&quot; element) 
&nbsp; &nbsp; document.getElementById(divname).appendChild(newdiv); 
&nbsp; &nbsp; 
} 
 
 
so i guess the right code is: 
 
function addRow(divname) 
{ 
 
//note the &quot;divname&quot; parameter 
var totalrows = document.getElementById(divname).rows.length+1; 
 
 
var product = '&lt;?php echo $products; ?&gt;'; 
var newdiv = document.createElement('&lt;tr&gt;'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp; &nbsp; newdiv.innerHTML = &quot;&lt;td&gt;&lt;strong&gt;&quot; + (totalrows + 1) + &quot;&lt;/strong&gt;&lt;/td&gt;&lt;td&gt;&lt;div class='field'&gt;&lt;select name='product[]' id='product'&gt;&lt;option selected='selected'&gt;&lt;/option&gt;&quot; + product + &quot;&lt;/select&gt;&lt;/td&gt;&quot;; 
&nbsp; &nbsp; document.getElementById(divname).appendChild(newdiv); 
&nbsp; &nbsp; 
} 

</div>

<div>
beautiful, it works thanks guys
</div>

<div>
<div class="content wysiwyg-content">
I'm sure this question has been asked allot and I've tried to look through previous articles but i'm looking to add new rows to a table and in the first column (cell) I want it to display what number that row is, below is what i have and it just displays #3 in each row. I hope this makes sense. Thanks guys. 
 
 

<pre><code class="code-10 nolinks" id="code-8167412">function addRow(divname)
{

var totalrows = document.getElementById('invoice').rows.length-1;


var product = '&lt;?php echo $products; ?&gt;';
var newdiv = document.createElement('&lt;tr&gt;');	
 newdiv.innerHTML = &quot;&lt;td&gt;&lt;strong&gt;&quot; + (totalrows + 1) + &quot;&lt;/strong&gt;&lt;/td&gt;&lt;td&gt;&lt;div class='field'&gt;&lt;select name='product[]' id='product'&gt;&lt;option selected='selected'&gt;&lt;/option&gt;&quot; + product + &quot;&lt;/select&gt;&lt;/td&gt;&quot;;
 document.getElementById(divname).appendChild(newdiv);
 
}
</code></pre>
</div>
</div>

I'm sure this question has been asked allot and I've tried to look through previous articles but i'm looking to add new rows to a table and in the first column (cell) I want it to display what number that row is, below is what i have and it just displays #3 in each row. I hope this makes sense. Thanks guys.



add new rows with number of row in 1st colum

JScript is Microsoft's dialect of the ECMAScript standard that is used in Microsoft's Internet Explorer. JScript is implemented as an Active Scripting engine, so it can be "plugged in" to OLE Automation applications that support Active Scripting, such as Internet Explorer, Active Server Pages, and Windows Script Host. It also means such applications can use multiple Active Scripting languages, e.g., JScript, VBScript or PerlScript.

JScript

Asynchronous JavaScript and XML (AJAX) is a group of interrelated Web development techniques used on the client-side to create asynchronous Web applications. With AJAX, web applications can send data to and retrieve from a server asynchronously (in the background) without interfering with the display and behavior of the existing page. HTML and CSS can be used in combination to mark up and style information. The Document Object Model (DOM) is accessed with JavaScript to dynamically display and allow interaction with the information presented.