Question

I am trying to add a new row in a table via javascript.
I want to have the row inserted before the last row where the sum is, and also the number in the label to be incremented with each new row inserted in a table.

<input type=button value='Add Row' />

<table cellspacing=0 cellpadding=4 id="table">
<tr><td>Number 1:</td><td><input value=20 style="width:30px" type=text  maxlength=2/></td></tr>
<tr><td>Number 2:</td><td><input value=25 style="width:30px" type=text  maxlength=2/></td></tr>
<tr><td style="border-top:solid 1px black;border-bottom:solid 1px black;">Sum:</td><td style="border-top:solid 1px black;border-bottom:solid 1px black;"><div>45</div></td></tr>
</table>

That’s the code for the table, I want to have it under ‘number 2’ row, but before the sum row.
And with each new row the label to be changed to Number 3: for example or Number 4, etc.
Any idea how I can do that. I need to use only javascript and no external tools or jquery is allowed.
Thanks in advance, Laziale

Answer 1

Make sure you have a tbody element in your table.

var table = document.getElementById('table');

var button = document.getElementsByTagName('input')[0];

button.onclick = function() {
    var clone = table.rows[table.rows.length - 2].cloneNode(true);
    clone.cells[0].firstChild.data = 
       clone.cells[0].firstChild.data.replace(/(\d+):/,function(str,g1) { 
                                                          return (+g1 + 1) + ':'; 
                                                       });
    table.tBodies[0].insertBefore(clone, table.rows[table.rows.length-1]);
};

http://jsfiddle.net/Btjg6/

---

Also, it would probably make sense to have your last row in a <tfoot> element, which would change things a little.

button.onclick = function() {
    var clone = table.rows[table.rows.length - 2].cloneNode(true);
    clone.cells[0].firstChild.data =
        clone.cells[0].firstChild.data.replace(/(\d+):/,function(str,g1) { 
                                                           return (+g1 + 1) + ':'; 
                                                        });
    table.tBodies[0].appendChild(clone);
};

http://jsfiddle.net/Btjg6/1/