Inserting Tables in IE 6 using W3C DOM techniques.

M

Mellow Crow

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(table);
}

/* ]]> */
</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(table);
}

Hope this saves some else an hour or two.
 
P

Patient Guy

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(table);
}

/* ]]> */
</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(table);
}

Hope this saves some else an hour or two.
Click to expand...

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

Patient Guy

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(table);
}

/* ]]> */
</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(table);
}

Hope this saves some else an hour or two.
Click to expand...

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?
Click to expand...

Proofreading Correction:

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

should read

"...are you saying that IE REFUSES to create..."
 
T

Tony

Ian said:
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.
Click to expand...

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

Thomas 'PointedEars' Lahn

Tony said:
Ian said:
The HTML-DOM interface insertRow should add this for you if it isn't
there.
Click to expand...

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, [...]
Click to expand...

That depends on how you call insertRow().

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


PointedEars
 
V

VK

Tony said:
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.
Click to expand...

That's an implementation bug in some Mozilla browsers and Safari. It
was explained here:
<http://groups.google.com/group/comp..._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.
Click to expand...

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

VK

And the 3rd final attempt to make it right :)

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

Thomas 'PointedEars' Lahn

VK said:
That's an implementation bug in some Mozilla browsers and Safari.
It was explained here:
Click to expand...
As I said it is easy to fix for all browsers by using optional rowIndex
argument:
insertRow(-1)
Click to expand...

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
 
V

VK

Thomas said:
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"?
Click to expand...

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

Thomas 'PointedEars' Lahn

VK said:
Thomas said:
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"?
Click to expand...

Because insertRow() method was finally monkey-out from the Microsoft
model [...]
Click to expand...

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

So? The Gecko DOM does not implement the IE DOM. That is just more
nonsense from you.


PointedEars
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Javascript DOM 1
Only one table shows up with the information 2
How can I create a table using the input element? 1
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
Sort by number of characters 1
DOM build table IE trouble .......... 10
DOM javascript working fine with IE but nothing happens with Firefox 6

Members online

Total: 65 (members: 2, guests: 63)
Robots: 435

Forum statistics

Threads
473,982
Messages
2,570,190
Members
46,736
Latest member
zacharyharris

Latest Threads

Top