«

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 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 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 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>
<URL:http://www.jibbering.com/faq/faq_notes/not_browser_detect.html>

> 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

> 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

Thomas 'PointedEars' Lahn wrote:
> 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 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.

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>

[...]

--
Rob

RobG wrote:
> 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.

VK wrote:
> RobG wrote:
>
>>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.

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 199, 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

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

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

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'>&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>

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