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

 

[Thomas 'PointedEars' Lahn]

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

 

[Thomas 'PointedEars' Lahn]

Unnecessary and I think plain wrong, insertRow is an HTMLTableElement
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'>&gt;</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.getElementById('test1');
test1.insertRow(-1);

These lack the previous feature test.
<URL:http://pointedears.de/scripts/test/whatami>

alert(test1.innerHTML);

^^^^^^^^^^
This is even more proprietary.

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

An (X)HTML `td' element does not have a `name' attribute, and so
an HTMLTableCellElement 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

 

[RobG]

Ian Collins wrote:




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.createElement() 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 HTMLTableSectionElement. 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>

[...]

 

[VK]

If adding rows using document.createElement() 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
pragrammatically)

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.

 

[RobG]

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

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.

 

[Thomas 'PointedEars' Lahn]

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

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/BrowserBugsSection/MSIE6Bugs/InsertRowNotWorking.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/default.aspx/Channel9.InternetExplorerProgrammingBugs

Gérard

 

[Gérard Talbot]

Thomas 'PointedEars' Lahn wrote :

Ian Collins wrote:


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.


This is not Valid (X)HTML, `td' elements do not have a `name' attribute.
The SHORTTAG syntax used is equivalent to

<td name='cell0'>&gt;</td>

in HTML, and not recommended for XHTML per XML (as the `td' element is
not declared EMPTY there).


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.


See above.


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

 

[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">&nbsp;</td>
<td width="20" height="20"><img src="../images/icon_join.gif"
width="19" height="16" /></td>
<td width="20" height="20"><img src="../images/icon_ok.gif"
width="16" height="16" /></td>
<td colspan="7">Three</td>
</tr>

Thanks so much!

Ann
PS: I have spent an hour googling "HTMLTableElement 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">&nbsp;</td>
<td width="20" height="20"><img src="../images/icon_join.gif"
width="19" height="16" /></td>
<td width="20" height="20"><img src="../images/icon_ok.gif"
width="16" height="16" /></td>
<td colspan="7">Three</td>
</tr>

Thanks so much!

Ann
PS: I have spent an hour googling "HTMLTableElement 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

 

[RobG]

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:

The bit that is rubbish is the phrase 'emulation of IE behavior' - it is
conforming to the W3 DOM 2 specification.

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


Your point is valid, but the discussion wasn't about building a table
with script, it was about inserting a new row into an existing table and
in that context the tbody already exists.

It is also interesting to compare the behaviour of different browsers
when adding a row using the HTMLTableElement::insertRow method and the
Node::appendChild method.

insertRow is 'safer' as in conforming browsers it automatically handles
the tbody issue. When adding rows with appendChild, not all browsers
will handle adding the row to a table (e.g. IE), they require the row to
be explicitly added to a tbody (or other table section). appendChild
might be more widely supported and is a reasonable first fallback.

If you have a table with more than one section (say with a thead, tfoot
or multiple tbodys) then you should get a reference to the correct table
section anyway to add the row - otherwise insertRow will just add the
row to the last tbody element.

[...]

 

[RobG]

Ian Collins wrote :



InsertRow() is not working accordingly
http://www.gtalbot.org/BrowserBugsSection/MSIE6Bugs/InsertRowNotWorking.html

If you add the tbody to the table *before* using insertRow, it works
fine (or add the rows to the table instead...).


[...]

 

[Gérard Talbot]

RobG wrote :

If you add the tbody to the table *before* using insertRow, it works
fine (or add the rows to the table instead...).

Yep. It works. Amazing.

I still think MSIE 6 and MSIE 7 beta 2 are buggy on this though.

Gérard

 

[Thomas 'PointedEars' Lahn]

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

For example by counting the rows of the table afterwards.


PointedEars

 

[Thomas 'PointedEars' Lahn]

Doesn't it (insertRow) add the row to the section containing the
previous row?

At least it is specified so.

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


PointedEars

 

[RobG]

RobG wrote: [...]

If you have a table with more than one section (say with a thead,
tfoot or multiple tbodys) then you should get a reference to the
correct table section anyway to add the row - otherwise insertRow will
just add the row to the last tbody element.

Doesn't it (insertRow) add the row to the section containing the
previous row?

I think you mean at the nominated table row index - so yes. I was
playing with -1 so it always went at the end.

The TR's rowIndex property is in respect to the table as a whole, but
when inserting in a section (e.g. objTbody.insertRow(i)), the index is
in relation to the section.

 

[Thomas 'PointedEars' Lahn]

Not a lot of use when the missing element is a tbody....

Actually, the `tbody' element is never missing if there is a `table'
element. It is its tags that are missing since they are both optional,
and, depending on the DOM, the respective element object in the document
tree that is therefore missing.

To detect if this object was included in the document tree only because
of calling insertRow() or another table-related DOM method, it would be
sufficient to call getElementsByTagName("tbody") for the HTMLTableElement
object before and after calling the DOM method, and examining its
properties (`length', for example).


PointedEars