add new rows with number of row in 1st colum

easyrider439
easyrider439 used Ask the Experts™
on
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

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
F IgorDeveloper

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

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

Learn the fundamentals of Angular 2, a JavaScript framework for developing dynamic single page applications.

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;

Author

Commented:
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
Top Expert 2004
Commented:
I believe that magadesign_sviluppo's solution does work, as long as you do not add multiple rows inside of addRow(). The problem in your original was that document.createElement() takes in the tag name tr and not the tag <tr>. I've tested the following code, and it works:
function addRow(divname) {
    var totalrows = document.getElementById(divname).rows.length-1;
    var newdiv = document.createElement('tr');
    newdiv.innerHTML = '<td>' + (totalrows + 1) + '</td>';
    newdiv.innerHTML += '<td>Test Product</td>';
    document.getElementById(divname).appendChild(newdiv);    
}

addRow('invoice');
addRow('invoice');
addRow('invoice');

Open in new window

F IgorDeveloper

Commented:
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);
   
}

Author

Commented:
beautiful, it works thanks guys

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial