By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,846 Members | 1,680 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,846 IT Pros & Developers. It's quick & easy.

Inserting Tables in IE 6 using W3C DOM techniques.

P: n/a
I had a problem in IE 6 when trying to insert a table using W3C DOM
techniques.

I found a solution and share it. :)

Initially I had......

**********************
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-script-type" content="text/javascript" />

<title>insertTableInIE</title>

<script type="text/javascript">
/* <![CDATA[ */

function insertTable() {
var table = document.createElement("table");
table.setAttribute("id","table2");
var tr = document.createElement("tr");
var td = document.createElement("td");
td.appendChild(document.createTextNode("Some stuff in the cell"));
tr.appendChild(td);
table.appendChild(tr);
document.getElementById('output').appendChild(tabl e);
}

/* ]]> */
</script>
</head>
<body>
<div>
<input type="button" id="btnInsertTable" name="btnInsertTable"
onclick="insertTable()" value="Insert Table" />
</div>

<div id="output"></div>
</body>
</html>
****************************
This would work in firefox 1.5 but not in IE 6.

The solution.... you have to explicitly insert the tr into a tbody element
and then the tbody into the table. So the function now becomes:

function insertTable() {
var table = document.createElement("table");
table.setAttribute("id","table2");
var tbody = document.createElement("tbody"); // explicitly create a
tbody
var tr = document.createElement("tr");
var td = document.createElement("td");
td.appendChild(document.createTextNode("Some stuff in the cell"));
tr.appendChild(td);
tbody.appendChild(tr); // note this new line.
table.appendChild(tbody); // append tbody rather than tr
document.getElementById('output').appendChild(tabl e);
}

Hope this saves some else an hour or two.

Dec 20 '05 #1
Share this Question
Share on Google+
11 Replies


P: n/a
Ian
Mellow Crow wrote:
I had a problem in IE 6 when trying to insert a table using W3C DOM
techniques.

I found a solution and share it. :)

Nice, looks like IE is doing the correct thing, table rows should be
contained in a tbody.

The HTML-DOM interface insertRow should add this for you if it isn't there.

Ian
Dec 20 '05 #2

P: n/a
"Mellow Crow" <no*****@nowhere.com> wrote in
news:43********@duster.adelaide.on.net:
I had a problem in IE 6 when trying to insert a table using W3C DOM
techniques.

I found a solution and share it. :)

Initially I had......

**********************
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"
/> <meta http-equiv="content-script-type" content="text/javascript"
/>

<title>insertTableInIE</title>

<script type="text/javascript">
/* <![CDATA[ */

function insertTable() {
var table = document.createElement("table");
table.setAttribute("id","table2");
var tr = document.createElement("tr");
var td = document.createElement("td");
td.appendChild(document.createTextNode("Some stuff in the
cell")); tr.appendChild(td);
table.appendChild(tr);
document.getElementById('output').appendChild(tabl e);
}

/* ]]> */
</script>
</head>
<body>
<div>
<input type="button" id="btnInsertTable" name="btnInsertTable"
onclick="insertTable()" value="Insert Table" />
</div>

<div id="output"></div>
</body>
</html>
****************************
This would work in firefox 1.5 but not in IE 6.

The solution.... you have to explicitly insert the tr into a tbody
element and then the tbody into the table. So the function now
becomes:

function insertTable() {
var table = document.createElement("table");
table.setAttribute("id","table2");
var tbody = document.createElement("tbody"); // explicitly
create a
tbody
var tr = document.createElement("tr");
var td = document.createElement("td");
td.appendChild(document.createTextNode("Some stuff in the
cell")); tr.appendChild(td);
tbody.appendChild(tr); // note this new line.
table.appendChild(tbody); // append tbody rather than tr
document.getElementById('output').appendChild(tabl e);
}

Hope this saves some else an hour or two.


Since table rows are also part of table headers ('thead') and table
footers ('tfoot'), are you saying that IE refers to create child table row
elements for these nodes?

As long as you're into experiments, then here might be some more
experiments for you:

* See how the browsers do in adding MORE THAN ONE table header or table
footer element to a table node through calling DOM functions. Try more
than one table body while you're at it.

* Write more than one table header, table footer, and table body into a
table using validated HTML, see how the browser parses it by inspecting
the DOM tree thereafter. (Alternatively report the exceptions you find in
attempting certain calls.)

* Compose a validating simple HTML document in which you create a table
WITHOUT any section elements---no THEAD, no TBODY, no TFOOT----and just a
couple of rows each with a couple of cells (can be void of content).
Inspect the DOM hierarchy to see which browsers imposed section elements
(namely TBODY) into the table, and which rendered it just as you wrote it,
and which conformed to all specifications (HTML, ECMA-262::Javascript,
DOM).
The results are a curiosity.

Dec 20 '05 #3

P: n/a
Patient Guy <Pa*********@nowhere.to.be.found.com> wrote in
news:Xn******************@207.115.17.102:
"Mellow Crow" <no*****@nowhere.com> wrote in
news:43********@duster.adelaide.on.net:
I had a problem in IE 6 when trying to insert a table using W3C DOM
techniques.

I found a solution and share it. :)

Initially I had......

**********************
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"
/> <meta http-equiv="content-script-type" content="text/javascript"
/>

<title>insertTableInIE</title>

<script type="text/javascript">
/* <![CDATA[ */

function insertTable() {
var table = document.createElement("table");
table.setAttribute("id","table2");
var tr = document.createElement("tr");
var td = document.createElement("td");
td.appendChild(document.createTextNode("Some stuff in the
cell")); tr.appendChild(td);
table.appendChild(tr);
document.getElementById('output').appendChild(tabl e);
}

/* ]]> */
</script>
</head>
<body>
<div>
<input type="button" id="btnInsertTable" name="btnInsertTable"
onclick="insertTable()" value="Insert Table" />
</div>

<div id="output"></div>
</body>
</html>
****************************
This would work in firefox 1.5 but not in IE 6.

The solution.... you have to explicitly insert the tr into a tbody
element and then the tbody into the table. So the function now
becomes:

function insertTable() {
var table = document.createElement("table");
table.setAttribute("id","table2");
var tbody = document.createElement("tbody"); // explicitly
create a
tbody
var tr = document.createElement("tr");
var td = document.createElement("td");
td.appendChild(document.createTextNode("Some stuff in the
cell")); tr.appendChild(td);
tbody.appendChild(tr); // note this new line.
table.appendChild(tbody); // append tbody rather than tr
document.getElementById('output').appendChild(tabl e);
}

Hope this saves some else an hour or two.
Since table rows are also part of table headers ('thead') and table
footers ('tfoot'), are you saying that IE refers to create child table
row elements for these nodes?


Proofreading Correction:

"...are you saying that IE refers to create..."

should read

"...are you saying that IE REFUSES to create..."
As long as you're into experiments, then here might be some more
experiments for you:

* See how the browsers do in adding MORE THAN ONE table header or
table footer element to a table node through calling DOM functions.
Try more than one table body while you're at it.

* Write more than one table header, table footer, and table body into
a table using validated HTML, see how the browser parses it by
inspecting the DOM tree thereafter. (Alternatively report the
exceptions you find in attempting certain calls.)

* Compose a validating simple HTML document in which you create a
table WITHOUT any section elements---no THEAD, no TBODY, no
TFOOT----and just a couple of rows each with a couple of cells (can be
void of content). Inspect the DOM hierarchy to see which browsers
imposed section elements (namely TBODY) into the table, and which
rendered it just as you wrote it, and which conformed to all
specifications (HTML, ECMA-262::Javascript, DOM).
The results are a curiosity.


Dec 20 '05 #4

P: n/a
Ian wrote:
Mellow Crow wrote:
I had a problem in IE 6 when trying to insert a table using W3C DOM
techniques.

I found a solution and share it. :)

Nice, looks like IE is doing the correct thing, table rows should be
contained in a tbody.

The HTML-DOM interface insertRow should add this for you if it isn't there.


I've discovered that the big difference is: IE inserts rows at the END
of the table, after the existing rows. Firefox inserts rows at the
BEGINNING of the table, before the existing rows.

If you have a <thead> and a <tbody> defined, then Firefox will insert
rows at the beginning of the <tbody>. Otherwise, it assumes that the
entire table is a <tbody> and inserts at the top.

Not sure which is the "proper" way to do it, but in this case, I'd say
the IE way makes more sense - when I want to add a row to an existing
table, I generally want it at the END.

Dec 20 '05 #5

P: n/a
Tony wrote:
Ian wrote:
The HTML-DOM interface insertRow should add this for you if it isn't
there.


I've discovered that the big difference is: IE inserts rows at the END
of the table, after the existing rows. Firefox inserts rows at the
BEGINNING of the table, before the existing rows.

If you have a <thead> and a <tbody> defined, then Firefox will insert
rows at the beginning of the <tbody>. Otherwise, it assumes that the
entire table is a <tbody> and inserts at the top.

Not sure which is the "proper" way to do it, [...]


That depends on how you call insertRow().

<http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-39872903>
PointedEars
Dec 20 '05 #6

P: n/a
VK

Tony wrote:
I've discovered that the big difference is: IE inserts rows at the END
of the table, after the existing rows. Firefox inserts rows at the
BEGINNING of the table, before the existing rows.
That's an implementation bug in some Mozilla browsers and Safari. It
was explained here:
<http://groups.google.com/group/comp.lang.javascript/browse_frm/thread/f1d06d29d2fd415e/0ba38e911abbbcb2>

As I said it is easy to fix for all browsers by using optional rowIndex
argument:
insertRow(-1)
If you have a <thead> and a <tbody> defined, then Firefox will insert
rows at the beginning of the <tbody>. Otherwise, it assumes that the
entire table is a <tbody> and inserts at the top.

Not sure which is the "proper" way to do it, but in this case, I'd say
the IE way makes more sense - when I want to add a row to an existing
table, I generally want it at the END.


Naturally. This is why it's a rather silly implementation bug.

Also note that IE will create tbody section for you automatically - but
not thead or tfoot. Some browsers will not do event that. The rule is:
if you plan to script your table later, mark up all three sections in
advance:
<table>
<thead></thead>
<tfoot></thead>
<tbody>
....
</tbody>
</table>

Dec 21 '05 #7

P: n/a
VK
<table>
<thead></thead>
<tfoot></foot>
<tbody>
....
</tbody>
</table>

Dec 21 '05 #8

P: n/a
VK
And the 3rd final attempt to make it right :-)

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

Dec 21 '05 #9

P: n/a
VK wrote:
Tony wrote:
I've discovered that the big difference is: IE inserts rows at the END
of the table, after the existing rows. Firefox inserts rows at the
BEGINNING of the table, before the existing rows.
That's an implementation bug in some Mozilla browsers and Safari.
It was explained here:

<http://groups.google.com/group/comp.lang.javascript/browse_frm/thread/f1d06d29d2fd415e/0ba38e911abbbcb2>
As I said it is easy to fix for all browsers by using optional rowIndex
argument:
insertRow(-1)


Since the HTMLTableElement::insertRow() method of W3C DOM Level 2 HTML
_requires_ that argument, that is, it is _not_ optional, how could
unexpected behavior due to omission of that argument possibly be
considered an "implementation bug"?

You are talking nonsense again.
PointedEars
Dec 22 '05 #10

P: n/a
VK

Thomas 'PointedEars' Lahn wrote:
Since the HTMLTableElement::insertRow() method of W3C DOM Level 2 HTML
_requires_ that argument, that is, it is _not_ optional, how could
unexpected behavior due to omission of that argument possibly be
considered an "implementation bug"?


Because insertRow() method was finally monkey-out from the Microsoft
model where
insertRow() has *optional* argument rowIndex set by default to *-1*
(new row goes to the bottom of the indicated table section). That was
perfectly logical and convenient. But as soon as it got into hands of
W3C it lost any logic and convenience (as usual).

We make organize a surway across of developers to ask what behavior
they see as expected and more convenient. I accept bets 100:1 for
results.

Dec 22 '05 #11

P: n/a
VK wrote:
Thomas 'PointedEars' Lahn wrote:
Since the HTMLTableElement::insertRow() method of W3C DOM Level 2 HTML
_requires_ that argument, that is, it is _not_ optional, how could
unexpected behavior due to omission of that argument possibly be
considered an "implementation bug"?
Because insertRow() method was finally monkey-out from the Microsoft
model [...]


You have yet to prove that.
where insertRow() has *optional* argument rowIndex set by default to *-1*
[...]


So? The Gecko DOM does not implement the IE DOM. That is just more
nonsense from you.
PointedEars
Dec 22 '05 #12

This discussion thread is closed

Replies have been disabled for this discussion.