473,324 Members | 2,257 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,324 software developers and data experts.

All browsers are cool but IE: div, form, table, input.. where's the table?

I think I can make a good interesting list of postings under this
subject header, 'All browsers are cool but IE.'

Anyway, the following code will show a table with an input box labeled,
'name', on all browsers (Gecko, KHTML, Opera) except IE.
Is there anybody ever hit on this issue before?
Thanks in advance.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title></head>
<body>
<script type='text/javascript'>
var div = document.createElement('div');
var form = document.createElement('form');
div.appendChild(form);

var table = document.createElement('table');
form.appendChild(table);

var tr = document.createElement('tr');
table.appendChild(tr);

var td = document.createElement('td');
td.appendChild(document.createTextNode('name:'));
tr.appendChild(td);

td = document.createElement('td');
var field = document.createElement('input');
td.appendChild(field);
tr.appendChild(td);

document.body.appendChild(div);
</script>
</body>
</html>

--
Wednus Project
http://wednus.com

Jun 2 '06 #1
6 1989
> "Sundew Shin" <we****@gmail.com> wrote:
news:11*********************@f6g2000cwb.googlegrou ps.com....

I think I can make a good interesting list of postings under this
subject header, 'All browsers are cool but IE.'

Anyway, the following code will show a table with an input box
labeled, 'name', on all browsers (Gecko, KHTML, Opera) except IE.
Is there anybody ever hit on this issue before?
Thanks in advance.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title></head>
<body>
<script type='text/javascript'>
var div = document.createElement('div');
var form = document.createElement('form');
div.appendChild(form);

var table = document.createElement('table');
form.appendChild(table);
/*
var tbody=document.createElement('tbody')
table.appendChild(tbody);
var tr = document.createElement('tr');
tbody.appendChild(tr);
*/

//OR

/*
table.insertRow(-1);
var tr=table.rows[table.rows.length-1];
*/
var td = document.createElement('td');
td.appendChild(document.createTextNode('name:'));
tr.appendChild(td);

td = document.createElement('td');
var field = document.createElement('input');
td.appendChild(field);
tr.appendChild(td);

document.body.appendChild(div);
</script>
</body>
</html>


--
BootNic Thursday, June 01, 2006 9:29 PM

Freedom defined is freedom denied.
*Illuminatus*

Jun 2 '06 #2
A ha! 'tbody' was the keyword here. Thanks a lot!
I tried many different things. for example, adding this codeline at the
end of the script block seemed work:

div.innerHTML = div.innerHTML; // could be just: div.innerHTML += '';

This showed the table containing the input element, but 'form.submit()'
didn't work anymore. so I compared the innerHTML of the div before the
codeline and after the codeline and noticed that the only difference is
the existence of '<TBODY>' element.
Since I usually just ignored these elements, THEAD, TBODY, TFOOT, I
just ignored it, but, there you go. that was the thing.

Now everyone is happy. =)
So, for IE, is it general that we should provide at least 'tbody' when
we construct a table using 'createElement'?

Again. thank you so much. you saved whole lot of my time and headache.
=)

BootNic wrote:
/*
var tbody=document.createElement('tbody')
table.appendChild(tbody);
var tr = document.createElement('tr');
tbody.appendChild(tr);
*/

//OR

/*
table.insertRow(-1);
var tr=table.rows[table.rows.length-1];
*/


Jun 2 '06 #3
Sundew Shin said the following on 6/1/2006 10:00 PM:
A ha! 'tbody' was the keyword here. Thanks a lot!
With regards to tables, tbodys, and browsers, IE gets this one right and
everybody else gets it wrong.
I tried many different things. for example, adding this codeline at the
end of the script block seemed work:

div.innerHTML = div.innerHTML; // could be just: div.innerHTML += '';
That is because IE is normalizing it (adding the TBODY) then reinserting it.
This showed the table containing the input element, but 'form.submit()'
didn't work anymore. so I compared the innerHTML of the div before the
codeline and after the codeline and noticed that the only difference is
the existence of '<TBODY>' element.
Yep. IE normalized it to fix incomplete code.
Since I usually just ignored these elements, THEAD, TBODY, TFOOT, I
just ignored it, but, there you go. that was the thing.

Now everyone is happy. =)
So, for IE, is it general that we should provide at least 'tbody' when
we construct a table using 'createElement'?


Yes.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Jun 2 '06 #4
BootNic wrote:
[...]
/*
table.insertRow(-1);
var tr=table.rows[table.rows.length-1];
*/


Better:

var tr = table.insertRow(-1);

insertRow adds the row to the table and returns a reference to the new
tr element (for the OP: there's no need to use appendChild).

var td = document.createElement('td');
td.appendChild(document.createTextNode('name:'));
tr.appendChild(td);


These 3 lines can be replaced with:

var td = tr.insertCell(-1);
td.appendChild(document.createTextNode('name:'));

insertCell works just like insertRow, only with td elements.

[...]

--
Rob
Jun 2 '06 #5
Randy Webb wrote:
Sundew Shin said the following on 6/1/2006 10:00 PM:
A ha! 'tbody' was the keyword here. Thanks a lot!


With regards to tables, tbodys, and browsers, IE gets this one right and
everybody else gets it wrong.


IE seems to pick the strangest times to decide to strictly interpret the
W3C DOM Spec.

I tried many different things. for example, adding this codeline at the
end of the script block seemed work:

div.innerHTML = div.innerHTML; // could be just: div.innerHTML += '';


That is because IE is normalizing it (adding the TBODY) then reinserting
it.
This showed the table containing the input element, but 'form.submit()'
didn't work anymore. so I compared the innerHTML of the div before the
codeline and after the codeline and noticed that the only difference is
the existence of '<TBODY>' element.


Yep. IE normalized it to fix incomplete code.


'Incomplete' but standards compliant. The tbody tags are optional,
though the element isn't. :-)

Since I usually just ignored these elements, THEAD, TBODY, TFOOT, I
just ignored it, but, there you go. that was the thing.

Now everyone is happy. =)
So, for IE, is it general that we should provide at least 'tbody' when
we construct a table using 'createElement'?


Yes.


Or use insertRow.
--
Rob
Jun 2 '06 #6
RobG wrote:
Randy Webb wrote:

Since I usually just ignored these elements, THEAD, TBODY, TFOOT, I
just ignored it, but, there you go. that was the thing.

Now everyone is happy. =)
So, for IE, is it general that we should provide at least 'tbody' when
we construct a table using 'createElement'?


Yes.


Or use insertRow.


Which I would recommend - I have seen createElement produce some unusual
results at times, but insertRow seems to work rather consistently across
multiple platforms.
Jun 2 '06 #7

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

5
by: Paul Eden | last post by:
Afternoon all. I wonder if someone might lend a little hand here? I'm using input.htm to take some data using radio and a text field from the user, which then "get"s them to update.php. Now...
1
by: Michael Brennan-White | last post by:
If I submit my for using a get action the resulting page loads . If I use a post action I get an error page saying "The page cannot be found". I am calling the originating page!!! This happens...
14
by: Michele Simionato | last post by:
I would like to know what is available for scripting browsers from Python. For instance, webbrowser.open let me to perform GET requests, but I would like to do POST requests too. I don't want to...
4
by: Eric | last post by:
Hey Everyone.. I have a form that has approximately 7 text fields and 1 checkbox. Generally when this form is submitted(to itself BTW) it works fine, however, when the checkbox is only field...
53
by: Cardman | last post by:
Greetings, I am trying to solve a problem that has been inflicting my self created Order Forms for a long time, where the problem is that as I cannot reproduce this error myself, then it is...
7
by: Mad Scientist Jr | last post by:
Through messing around I got IE6 (win xp) to show/hide a table row. I gave my <TR> an ID of "trRow" and trRow.style.display='none'; hides it trRow.style.display='block'; displays it (will any...
12
by: confused | last post by:
After expressing my interest in expanding my new knowledge of HTML and CSS into the wild realm of JavaScript, I was advised that it is wiser to avoid it, since not all browsers are use it or are...
4
SHOverine
by: SHOverine | last post by:
I have a 3-part form that I am having trouble with. First part is to select the user group and the week and year that I want to submit results for, this calls the elements that I want to update. ...
0
bmallett
by: bmallett | last post by:
First off, i would like to thank everyone for any and all help with this. That being said, I am having a problem retrieving/posting my dynamic form data. I have a form that has multiple options...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
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: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
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...

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.