Cannot add row to beginning of data-bound table (IE bug!)

[Andrus Moor]

To reproduce: run the following code in IE 6 and right-click in table.

Observed result: Error : invalid argument at line var row =
table.insertRow(0);

Expected result: new row must be inserted.

Any idea how to add new row to beginning of data-bound table ?
Code to reproduce:

<script>
function addRowDOM (tableID) {
var table = document.getElementById(tableID);

// Next line causes error: invalid argument. Why ?
var row = table.insertRow(0);
var cell = row.insertCell(0);
cell.innerHTML = arguments[1];
}

</script>

<xml id="result" javaDSOCompatible="true"><result>
<row><item>pine</item></row>
<row><item>apple</item></row>
</result></xml>

<TABLE DATASRC="#result" id=tbl >

<tr oncontextmenu="addRowDOM('tbl','<input type=text datafld=item>');return
false;">
<td><input type=text datafld=item></input></td>
</tr></TABLE>

[milkyway]

Hello,

Did anyone find an answer for this? Sorry to be a pain but I am looking
everywhere and have found nothing on this subject

Regards.

[sharon]

It is not exactly a bug since you bound your table to a data source. if
you want to add a row you should add it to your data source and it will
be added automatically to the table. in case you do not want to add it
to your data source, you can append the new row to the thead or tfoot
sections.

[VK]

Where is a bug here? It's a totally correct MVC behavior. Either you are
using a table as a "view interface" to external data (then leave your
interface alone and work with data themselves), or not.

If you are trying to modify table's header (some conditional navigation
tools, for example):

var oHeader = document.getElementById(tableID).tHead;
oHeader.insertRow();

Of course, you table has to be properly set for it:

<table>
<thead>
....
</thead>
<tfoot>
....
</tfoot>
<tbody>
....
</tbody>
</table>