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]

VK wrote:

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).

3 is the specified action for HTMLTableElemen t.insertRow(), provided you
don't specify a row greater than 0.
While the 3rd one is currently the winning one, but all three outcomes
are still possible between different *rather modern* browsers and
versions.

Works in Firefox and Opera, which browsers don't work as expected?

--
Ian Collins.

[RobG]

VK wrote:

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.

The language was not perfect, but it is correct. In IE you must append a
row created with createElement to a tbody (or thead or tfoot) element. In
other browsers, you can add it to the table - where it will be appended as
the last child of the first tbody element.

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.
Which is the correct behaviour for any standards compliant browser. A
tbody element is mandatory, the tags aren't.

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)
Of course. thead and tfoot elements only exist if you put them in the
markup or create them using script. Otherwise they won't exist.


Other browsers do not create tBody automatically.
Which ones? If they don't, they aren't compliant with HTML 4.

On attempt to insert
a row to a table without <tbody> section three outcomes are possible:
1) the operation will fail
If the browser supports insertRow (which was part of DOM 1 in 1998), then
it should not fail. If it's not supported, feature testing should detect
that and some other solution should be attempted.

2) new row is added as direct child of table
In which browser? Any I've tested *always* create a tbody even if the tags
aren't coded in the HTML source, as per the HTML 4 specification.

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).
Rubbish. The tbody is created when the HTML source for the table is
parsed, whether the tags are there or not because that is what the HTML 4
spec says should happen. It is not created as a result of using insertRow.

That IE has the same behaviour as other browsers doesn't mean they are
emulating IE, it just means IE follows the spec.

head and body tags are optional but the elements aren't, is that an
emulation of IE too?

While the 3rd one is currently the winning one, but all three outcomes
are still possible between different *rather modern* browsers and
versions.
Please state any modern browser that does either 1 or 2.


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.
That is not good advice. thead and tfoot are only required if you actually
use them, they aren't allowed to be empty so if you don't have any need for
them, don't code them. tbody *tags* are not mandatory, read the spec.

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

They can be securely omitted anyway.

--
Rob

[Thomas 'PointedEars' Lahn]

Ian Collins wrote:

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).

I do not have IE here, and it remains to be seen if it works in _all_ IE
versions on all possible platforms (the OP's requirement was IE_6_ only).

<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.

Scripting, especially DOM scripting, operating from within and on not Valid
markup has been proven to be inherently unreliable. Examples/demos should
be Valid or they are next to useless.
PointedEars

[Gérard Talbot]

Ian Collins wrote :

which browsers don't work as expected?

InsertRow() is not working accordingly
http://www.gtalbot.org/BrowserBugsSe...otWorking.html

Everything was nicely reported at IE 6 programming bug wiki page.
Search for
"insertRow( ) in iteration loop does not work"
at
http://channel9.msdn.com/wiki/defaul...rogrammingBugs

Gérard
--
remove blah to email me

[Gérard Talbot]

Thomas 'PointedEars' Lahn wrote :

Ian Collins wrote:

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>

The page at the above url has validation errors. Isn't strange to see
people like 'PointedEars' telling others about valid webpage when most
of his own website pages fail to pass validation and they don't even use
a strict DTD.

When someone like Thomas 'PointedEars' Lahn has well above 500
validation markup errors on his site, then he should fix these instead
of lecturing others about valid HTML.

Gérard
--
remove blah to email me

[Giggle Girl]

Ok, I have successfull used insertRow to put a row into my table.
Trouble is, I don't know how to put cell content there! Can someone
show me working code that inserts a row that looks like this:

<tr id="tree_row_3" >
<td width="20" height="20">&nb sp;</td>
<td width="20" height="20"><im g src="../images/icon_join.gif"
width="19" height="16" /></td>
<td width="20" height="20"><im g src="../images/icon_ok.gif"
width="16" height="16" /></td>
<td colspan="7">Thr ee</td>
</tr>

Thanks so much!

Ann
PS: I have spent an hour googling "HTMLTableEleme nt insertRow" and can
find only the theory behind it, not working examples...

[Gérard Talbot]

Giggle Girl wrote :

Ok, I have successfull used insertRow to put a row into my table.
Trouble is, I don't know how to put cell content there! Can someone
show me working code that inserts a row that looks like this:

<tr id="tree_row_3" >
<td width="20" height="20">&nb sp;</td>
<td width="20" height="20"><im g src="../images/icon_join.gif"
width="19" height="16" /></td>
<td width="20" height="20"><im g src="../images/icon_ok.gif"
width="16" height="16" /></td>
<td colspan="7">Thr ee</td>
</tr>

Thanks so much!

Ann
PS: I have spent an hour googling "HTMLTableEleme nt insertRow" and can
find only the theory behind it, not working examples...

Study this example:
Dynamically creating, populating and inserting a table
http://www.gtalbot.org/DHTMLSection/CreatingTable.html

Please don't forget to read my copyright notice.
http://www.gtalbot.org/Varia/CopyrightNotice.html

Gérard
--
remove blah to email me

[Ian Collins]

Thomas 'PointedEars' Lahn wrote:

Scripting, especially DOM scripting, operating from within and on not Valid
markup has been proven to be inherently unreliable. Examples/demos should
be Valid or they are next to useless.

How can I show IE adding the missing element if I include it in the markup?

--
Ian Collins.

[Ian Collins]

Giggle Girl wrote:

Ok, I have successfull used insertRow to put a row into my table.
Trouble is, I don't know how to put cell content there! Can someone
show me working code that inserts a row that looks like this:

<tr id="tree_row_3" >
<td width="20" height="20">&nb sp;</td>
<td width="20" height="20"><im g src="../images/icon_join.gif"
width="19" height="16" /></td>
<td width="20" height="20"><im g src="../images/icon_ok.gif"
width="16" height="16" /></td>
<td colspan="7">Thr ee</td>
</tr>

Thanks so much!

Ann
PS: I have spent an hour googling "HTMLTableEleme nt insertRow" and can
find only the theory behind it, not working examples...

HTMLTableElemen t.insertRow() returns an HTMLElement (the new row). You
can use insertCell() to add a cell, see my example.

--
Ian Collins.

[Ian Collins]

RobG wrote:

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).

Rubbish. The tbody is created when the HTML source for the table is
parsed, whether the tags are there or not because that is what the HTML
4 spec says should happen. It is not created as a result of using
insertRow.

Not rubbish, it depends on the context. If you are building a table in
script, the tbody will be added when you add the first row, try:

var table = document.create Element('table' );
alert(table.chi ldNodes.length) ;
row = table.insertRow (-1);
alert(table.chi ldNodes.length) ;
alert(table.fir stChild.nodeNam e);

A conforming browser will alert TBODY.

--
Ian Collins.