asked on

add new rows with number of row in 1st colum

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.

function addRow(divname)
{

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


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

Open in new window

Francisco Igor

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);

magadesign_sviluppo

hi,
this seams to work

function addRow(divname)
{
	
var totalrows = document.getElementById('invoice').rows.length-1;

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

Open in new window

magadesign_sviluppo

oops :)
replace xxx
width <?php echo $products; ?>

magadesign_sviluppo

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;

easyrider439

ASKER

using your method doesnt add up the rows it displays the following:

<table>

1 text here
4 text here
4 text here

and I want it too display as follows:

1 text here
2 text here
3 text here
4 text here

hope that makes sence

ASKER CERTIFIED SOLUTION

Zyloch

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Francisco Igor

Some notes:

//the divname refers to a "Table" object or a "DIV" object??
function addRow(divname)
{

///what is the "invoice" element?? (table, div) it refers to the same "divname" parameter ???
var totalrows = document.getElementById('invoice').rows.length-1;

///totalrows does not change length if it's not the "divname" object

var product = 'xxx';
var newdiv = document.createElement('tr');
newdiv.innerHTML = "<td><strong>" + (totalrows + 1) + "</strong></td><td><div class='field'><select name='product[]' id='product'><option selected='selected'>" + product + "</option></select></td>";

// the row is added to the divname element (and maybe it should be the same "invoice" element)
document.getElementById(divname).appendChild(newdiv);

}

so i guess the right code is:

function addRow(divname)
{

//note the "divname" parameter
var totalrows = document.getElementById(divname).rows.length+1;

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

}

easyrider439

ASKER

beautiful, it works thanks guys