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>