Can you make them table insertRow and insertBefore (element) worktogether?

DL · May 31, 2008

Here's the thing, I have this HTML Table, that has multile rows
already, each has an ID, one of them at the bottom section has id of
"SaveData", new TRs are dynamically created upon user interaction, for
instance,
var tbl = document.getElementById ('mytable');
// pick a TR position to insert a new row
var trPos = 6
newTR = tbl.insertRow(trPos);

// then increment the trPos var
// other business rules and functions...

it works all right for a few TR insertions, and then, it begins to
insert a new TR after "SaveData",
that's bad. So, the question is, is there any way to use
tbl.insertRow(trPos) in conjunction with
insertBefore(document.getElementById('SaveData'))
that would ensure every newly inserted TR would be inserted before
"SaveData" TR?

I've looked at insertAdjacentElement method, but that does not seem to
solve the problem.

Sorry I have to ask the question before I got a good js book. Thanks.

SAM · May 31, 2008

DL a écrit :

Here's the thing, I have this HTML Table, that has multile rows
already, each has an ID, one of them at the bottom section has id of
"SaveData", new TRs are dynamically created upon user interaction, for
instance,
var tbl = document.getElementById ('mytable');
// pick a TR position to insert a new row
var trPos = 6
newTR = tbl.insertRow(trPos);

// then increment the trPos var
// other business rules and functions...

it works all right for a few TR insertions, and then, it begins to
insert a new TR after "SaveData",

with which browser ?

a "few" ... how much ?
because I can't reproduce it ...

that's bad. So, the question is, is there any way to use
tbl.insertRow(trPos)
that would ensure every newly inserted TR would be inserted before
"SaveData" TR?

each of these 3 functions bellow add a row before the savedatas
(with my Firefox - not tested IE)

<html>
<script type="text/javascript">

function addRow() {
var tbl = document.getElementById ('mytable');
var newTR = tbl.insertRow(tbl.rows.length-1);
var newTD = document.createElement('TD');
newTD.innerHTML = 'test';
newTR.appendChild(newTD);
}

function addRow2() {
var tbl = document.getElementById ('mytable');
tbl = tbl.getElementsByTagName('TBODY')[0];
var newTR = tbl.insertRow(tbl.rows.length);
var newTD = document.createElement('TD');
newTD.innerHTML = 'test';
newTR.appendChild(newTD);
}

function addRow3() {
var tbl = document.getElementById ('mytable');
tbl = tbl.getElementsByTagName('TBODY')[0];
var newTR = tbl.appendChild(document.createElement('TR'));
var newTD = document.createElement('TD');
newTD.innerHTML = 'test';
newTR.appendChild(newTD);
}
</script>

<table id="mytable" border=1>
<thead>
<tr><th>...</th></tr>
</thead>
<tbody>
<tr><td>...</td></tr>
</tbody>
<tfoot>
<tr id="SaveData"><td>datas</td></tr>
</tfoot>
</table>
<p><a href="javascript:addRow();">add 1</a>
<p><a href="javascript:addRow2();">add 2</a>
<p><a href="javascript:addRow3();">add 3</a>
</html>

SAM · May 31, 2008

SAM a écrit :

each of these 3 functions bellow add a row before the savedatas
(with my Firefox - not tested IE)

and this forth one works fine too :

<html>
<script type="text/javascript">

function addRow4() {
var tbl = document.getElementById ('SaveData');
var newTR = document.createElement('TR');
var newTD = document.createElement('TD');
newTD.innerHTML = 'test';
newTR.appendChild(newTD);
tbl.parentNode.insertBefore(newTR, tbl);
}
</script>
<table id="mytable" border=1>
<thead>
<tr><th>...</th></tr>
</thead>
<tbody>
<tr><td>...</td></tr>
</tbody>
<tfoot>
<tr id="SaveData"><td>datas</td></tr>
</tfoot>
</table>
<p><a href="javascript:addRow4();">add 4</a>
</html>

DL · May 31, 2008

SAM a écrit : ...

Thanks, I'm testing with IE7, your syntax of tbl.rows.length gave me
an idea,
I've now solved this particular problem with a different approach than
yours.

insert element at specified position DOM2	1	Dec 13, 2005
problem with dynamically adding elements to DOM and referencing them:	2	Apr 8, 2010
InsertRow() and rowIndex	3	Aug 19, 2003
Moving dynamically created table rows up and down in an HTML table	2	Oct 10, 2008
dynamic row table option problem	2	Sep 26, 2009
What's wrong with the following code? Thanks	17	Mar 21, 2008
DOM table simple question	3	May 14, 2006
dynamically add a table row with onclick	8	May 8, 2005

Can you make them table insertRow and insertBefore (element) worktogether?

DL

SAM

SAM

DL

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads