ie6 Insert Row at specific Row Index of Table

[Giggle Girl]

Can someone show me how to insert a row at any given row index of an
already created table? It only has to work in IE6 (used on intranet at
work).

Specifically, if a table is 20 rows in total (thought his will vary),
and someone wants to insert a new row at row 5, i need for one row to
be added, and each of the rows from 5-20 to be "cloned" to 6-21.

The contents of row 5 may vary as well; it is not a straight copy of an
exisiting row.

I have seen something that did this very thing, but it used innerHTML,
and I have read this is inavisable for tables.

Thanks,
Ann

[Ian Collins]

Giggle Girl wrote:

Can someone show me how to insert a row at any given row index of an
already created table? It only has to work in IE6 (used on intranet at
work).

Specifically, if a table is 20 rows in total (thought his will vary),
and someone wants to insert a new row at row 5, i need for one row to
be added, and each of the rows from 5-20 to be "cloned" to 6-21.

Locate the table element in the DOM and use insertRow( index ) to insert
the row.

--
Ian Collins.

[Thomas 'PointedEars' Lahn]

Ian Collins wrote:

Giggle Girl wrote:

Can someone show me how to insert a row at any given row index of an
already created table? It only has to work in IE6 (used on intranet at
work).

Specifically, if a table is 20 rows in total (thought his will vary),
and someone wants to insert a new row at row 5, i need for one row to
be added, and each of the rows from 5-20 to be "cloned" to 6-21.

Locate the table element in the DOM and use insertRow( index ) to insert
the row.

And be sure that you insert it as child element of a `thead' or `tbody'
element.
PointedEars

[Ian Collins]

Thomas 'PointedEars' Lahn wrote:

Specifically , if a table is 20 rows in total (thought his will vary),
and someone wants to insert a new row at row 5, i need for one row to
be added, and each of the rows from 5-20 to be "cloned" to 6-21.

Locate the table element in the DOM and use insertRow( index ) to insert
the row.

And be sure that you insert it as child element of a `thead' or `tbody'
element.

Unnecessary and I think plain wrong, insertRow is an HTMLTableElemen t
method and it adds a tbody if the table is empty. Otherwise it will add
to the table section corresponding to the index.

Try this:

HTML:

<table id='test1'>
</table>
<table id='test2'>
<tbody>
<tr>
<td name='cell0'/>
<tr>
<tr>
<td name='cell1'/>
<tr>
<tbody>
</table>

Script:

var test1 = document.getEle mentById('test1 ');

test1.insertRow (-1);

alert(test1.inn erHTML);

var test2 = document.getEle mentById('test2 ');

var row = test2.insertRow (1);
var cell = row.insertCell(-1);
cell.name = 'cell2';

alert(test2.inn erHTML);

--
Ian Collins.

[Thomas 'PointedEars' Lahn]

Ian Collins wrote:

Thomas 'PointedEars' Lahn wrote:

Specifically, if a table is 20 rows in total (thought his will vary),
and someone wants to insert a new row at row 5, i need for one row to
be added, and each of the rows from 5-20 to be "cloned" to 6-21.
Locate the table element in the DOM and use insertRow( index ) to insert
the row. And be sure that you insert it as child element of a `thead' or `tbody'
element.

Unnecessary and I think plain wrong, insertRow is an HTMLTableElemen t
method and it adds a tbody if the table is empty.

I remember to have read here that the latter does not happen in all DOMs,
especially I remember to have read here that it does not happen in the IE
DOM. Maybe I remember incorrectly.
Otherwise it will add to the table section corresponding to the index.

Try this:

HTML:

<table id='test1'>
</table>
This is not Valid (X)HTML. The `table' element requires at least the
`tbody' element in HTML, and although its start and end tags are optional
in HTML, its content model requires the `tr' element. In XHTML, the
content model of the `table' element requires at least one `tbody' or
one `tr' element.
<table id='test2'>
<tbody>
<tr>
<td name='cell0'/>
This is not Valid (X)HTML, `td' elements do not have a `name' attribute.
The SHORTTAG syntax used is equivalent to

<td name='cell0'>&g t;</td>

in HTML, and not recommended for XHTML per XML (as the `td' element is
not declared EMPTY there).
<tr>
<tr>
This is not Valid (X)HTML, the `tr' element's content model requires the
`th' or `td' element. In XHTML, the close tag is not optional.
<td name='cell1'/>
<tr>
See above.
<tbody>
</table>

Script:

var test1 = document.getEle mentById('test1 ');
test1.insertRow (-1);
These lack the previous feature test.
<URL:http://pointedears.de/scripts/test/whatami>
<URL:http://www.jibbering.c om/faq/faq_notes/not_browser_det ect.html>
alert(test1.inn erHTML); ^^^^^^^^^^
This is even more proprietary.
var test2 = document.getEle mentById('test2 ');
var row = test2.insertRow (1);
var cell = row.insertCell(-1);
cell.name = 'cell2';
alert(test2.inn erHTML);

An (X)HTML `td' element does not have a `name' attribute, and so
an HTMLTableCellEl ement object does not have a `name' property.
As DOM element objects are exposed as host objects to the script
engine, this has potential to break the script.

See above for the rest.
PointedEars

[Giggle Girl]

Locate the table element in the DOM and use insertRow( index ) to insert
the row.

And doing so will automatically "bump" all rows thereafter? (No need
for me to manually do it?)

If that is the case, awesome! If not, do you have some code I can see
that does it?

Thanks so much,
Ann

[Ian Collins]

Thomas 'PointedEars' Lahn wrote:

And be sure that you insert it as child element of a `thead' or `tbody'
element.
Unnecessary and I think plain wrong, insertRow is an HTMLTableElemen t
method and it adds a tbody if the table is empty.

I remember to have read here that the latter does not happen in all DOMs,
especially I remember to have read here that it does not happen in the IE
DOM. Maybe I remember incorrectly.

If you'd tried the mickey mouse example (rather than pulling it apart)
you would have seen that it does work in IE (the OP's requirement).

<table id='test1'>
</table>

This is not Valid (X)HTML. The `table' element requires at least the
`tbody' element in HTML, and although its start and end tags are optional
in HTML, its content model requires the `tr' element. In XHTML, the
content model of the `table' element requires at least one `tbody' or
one `tr' element.

I don't care, it was a quick demo. The web is full of such
non-conforming code and browsers cope with it. If you try it, you will
see than IE automatically inserts the tbody.

alert(test1.inn erHTML);
^^^^^^^^^^
This is even more proprietary.

It's a demo for IE for goodness sake.

An (X)HTML `td' element does not have a `name' attribute, and so
an HTMLTableCellEl ement object does not have a `name' property.
As DOM element objects are exposed as host objects to the script
engine, this has potential to break the script.

That was a typo.

--
Ian Collins.

[Ian Collins]

Giggle Girl wrote:

Locate the table element in the DOM and use insertRow( index ) to insert
the row.

And doing so will automatically "bump" all rows thereafter? (No need
for me to manually do it?)

Yes, as the name suggests, it inserts a row.

--
Ian Collins.

[RobG]

Thomas 'PointedEars' Lahn wrote:

Ian Collins wrote:

Thomas 'PointedEars' Lahn wrote:

>Specifical ly, if a table is 20 rows in total (thought his will vary),
>and someone wants to insert a new row at row 5, i need for one row to
>be added, and each of the rows from 5-20 to be "cloned" to 6-21.

Locate the table element in the DOM and use insertRow( index ) to insert
the row.

And be sure that you insert it as child element of a `thead' or `tbody'
element.

Unnecessary and I think plain wrong, insertRow is an HTMLTableElemen t
method and it adds a tbody if the table is empty.

I remember to have read here that the latter does not happen in all DOMs,
especially I remember to have read here that it does not happen in the IE
DOM. Maybe I remember incorrectly.

If adding rows using document.create Element() and appendChild(), some
browsers (e.g. IE) require that you append it to a tbody element - other
browsers (e.g. Gecko & KHTML based browsers) let you append it to the table.

However, insertRow() is a method of the HTMLTableSectio nElement. The
new row is created as a child of the table element, a append separate
append is not required.

<URL:http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-93995626>

[...]

--
Rob

[VK]

RobG wrote:

If adding rows using document.create Element() and appendChild(), some
browsers (e.g. IE) require that you append it to a tbody element - other
browsers (e.g. Gecko & KHTML based browsers) let you append it to the table.

Not totally right.
IE automatically creates at least one tbody element during the initial
page parsing. So either you added <tbody> tag or not you still have
tBody section and appendChild will add rows to there.
At the same time <thead> and <tfoot> elements are not created
automatically, so in order to insert rows to tHead or tFoot you have to
mark up your table in advance (or create header and footer
pragrammaticall y)

Other browsers do not create tBody automatically. On attempt to insert
a row to a table without <tbody> section three outcomes are possible:
1) the operation will fail
2) new row is added as direct child of table
3) on the first attempt to insert a row tBody section is created and
new row is added as a child if it (namely emulation of IE behavior).

While the 3rd one is currently the winning one, but all three outcomes
are still possible between different *rather modern* browsers and
versions.

This is why I'd like to repeat: if one plans to script a table, always
markup <thead>, <tfoot> and <tbody> manyally, do not trust the parser.

If you do not plan to script the table (add/remove/sort rows) then
<thead>, <tfoot> and <tbody> can be securely omited.