473,322 Members | 1,352 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,322 software developers and data experts.

Inserting Tables in IE 6 using W3C DOM techniques.

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
11 2045
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
"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
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
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
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
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
VK
<table>
<thead></thead>
<tfoot></foot>
<tbody>
....
</tbody>
</table>

Dec 21 '05 #8
VK
And the 3rd final attempt to make it right :-)

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

Dec 21 '05 #9
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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

0
by: Marko Poutiainen | last post by:
Situation: We had to make our SQLServer 2000 database multi-lingual. That is, certain things (such as product names) in the database should be shown in the language the user is using (Finnish,...
44
by: Mariusz Jedrzejewski | last post by:
Hi, I'll be very grateful if somebody can explain me why my Opera 7.23 (runing under linux) doesn't show me inner tables. Using below code I can see only "inner table 1". There is no problem with...
81
by: sinister | last post by:
I wanted to spiff up my overly spartan homepage, and started using some CSS templates I found on a couple of weblogs. It looks fine in my browser (IE 6.0), but it doesn't print right. I tested...
3
by: Joachim Klassen | last post by:
Hi all, first apologies if this question looks the same as another one I recently posted - its a different thing but for the same szenario:-). We are having performance problems when...
4
by: Tom Dauria | last post by:
What I am trying to do is write a resume into a word document from information in an Access database. I have been using bookmarks and inserting table results into the document and so far it's...
5
by: aniket_sp | last post by:
i am using a data adapter and a dataset for filling and retrieving data into .mdb database. following is the code..... for the form load event Dim dc(0) As DataColumn Try If...
11
by: c676228 | last post by:
Hi everyone, I am just wodering in asp program, if there is anybody writing store procedure for inserting data into database since there are so many parameters need to be passed into store...
0
by: gp | last post by:
I am and have been using PDO for about a year now...and have finally gotten around to solving the "DB NULL value" issues I ran into early on... I am looking for suggestions and techniques to...
2
by: AlexanderDeLarge | last post by:
Hi! I got a problem that's driving me crazy and I'm desperately in need of help. I'll explain my scenario: I'm doing a database driven site for a band, I got these tables for their discography...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.