dhtml style in IE internet explorer

Mahmoud · Apr 2, 2006

When I wrote the following code to create a dynamic table with styles
associated with each row, it worked in Firefox. But when this was tried
in IE, the result was a table with no styles that were displayed. Could
someone explain to me how a dynamic table should be created (in IE)?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<link rel="stylesheet" href="css/1.css" type="text/css" />
</head>

<body>

<table id="gst">
<tr>
<td>Rent</td>
<td>BR</td>
<td>Name</td>

<td>Street</td>
<td>Date</td>
</tr>

<tr class="odd" onmouseover = 'this.className="over"'
onmouseout='this.className="odd"' onclick='openWindow(1,lease_list)'>
<td>RR</td>
<td>RR</td>
<td>RR</td>
<td>RR</td>
<td>RR</td>

</tr>

</table>

<script type="text/javascript">
function showTable(){

table = document.getElementById('gst');
var x=table.insertRow(1);
var y=x.insertCell(0);
var z=x.insertCell(1);
x.setAttribute('onclick','openWindow('+' '+'1,lease_list)');
cl="odd";
x.setAttribute('class',cl);
x.setAttribute('onmouseover','this.className="over"');
x.setAttribute('onmouseout','this.className="'+cl+'"');
y.innerHTML="NEW CELL1";
z.innerHTML="NEW CELL2";
}

showTable();

</script>

</body>

</html>

Gérard Talbot · Apr 2, 2006

Mahmoud wrote :

When I wrote the following code to create a dynamic table with styles
associated with each row, it worked in Firefox. But when this was tried
in IE, the result was a table with no styles that were displayed. Could
someone explain to me how a dynamic table should be created (in IE)?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<link rel="stylesheet" href="css/1.css" type="text/css" />
</head>

<body>

<table id="gst">
<tr>
<td>Rent</td>
<td>BR</td>
<td>Name</td>

<td>Street</td>
<td>Date</td>
</tr>

<tr class="odd" onmouseover = 'this.className="over"'
onmouseout='this.className="odd"' onclick='openWindow(1,lease_list)'>
<td>RR</td>
<td>RR</td>
<td>RR</td>
<td>RR</td>
<td>RR</td>

</tr>

</table>

<script type="text/javascript">
function showTable(){

table = document.getElementById('gst');

Right here, you are creating a second table which will have the same id
attribute value as the first one. Id attribute value must be
document-unique.

http://www.w3.org/TR/html401/struct/global.html#adef-id

You also have declare table as a global variable... when it doesn't seem
necessary to do so.

var x=table.insertRow(1);

You need to create a tbody first and append it to the table first; MSIE
requires this in order to be able to insert row to it.

var y=x.insertCell(0);
var z=x.insertCell(1);
x.setAttribute('onclick','openWindow('+' '+'1,lease_list)');

This won't work.

x.onclick = new Function ("evt", "openWindow('1, lease_list');");

cl="odd";
x.setAttribute('class',cl);

You should avoid resorting to setAttribute() because IE has a number of
flaws, bugs on this method. And you can avoid declaring the cl variable.

x.className = "odd";
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-95362176

x.setAttribute('onmouseover','this.className="over"');

x.onmouseover = new Function("evt", "this.className = 'over';");

x.setAttribute('onmouseout','this.className="'+cl+'"');

x.onmouseover = new Function("evt", "this.className = 'odd';");

y.innerHTML="NEW CELL1";

y.appendChild(document.createTextNode("NEW CELL1"));

z.innerHTML="NEW CELL2";

z.appendChild(document.createTextNode("NEW CELL2"));

}

showTable();

You should call the showTable() only and only when the document has been
fulled loaded and parsed and once the DOM tree has been built: this is
for best results (speed, memory management, avoid crashing on some other
browsers, etc.). It may work while loading the document but I would
still discourage such coding practice.

</script>

</body>

</html>

Not tested.

Gérard

Thomas 'PointedEars' Lahn · Apr 2, 2006

Mahmoud said:
When I wrote the following code to create a dynamic table with styles
associated with each row, it worked in Firefox. But when this was tried
in IE, the result was a table with no styles that were displayed. Could
someone explain to me how a dynamic table should be created (in IE)?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

IE does not support XHTML. Use HTML 4.01 Strict, that suffices here, and
makes using possibility of inner_HTML_ reasonable in the first place.

<head>
<link rel="stylesheet" href="css/1.css" type="text/css" />

In XHTML, as an XML application, the stylesheet must be referenced
in an XML Process Instruction before the DOCTYPE declaration:

<?xml-stylesheet type="text/css" href="css/1.css"?>

It only worked with `link' because the XHTML was rendered as error-corrected
HTML as you served it as text/html. Serve XHTML as application/xhtml+xml
(then you will recognize that IE does not support it.)

</head>

<body>

<table id="gst">
[...]
<tr class="odd" onmouseover = 'this.className="over"'
onmouseout='this.className="odd"' onclick='openWindow(1,lease_list)'>

Users without client-side scripting will not be able to use the table as

intended. Use said:
[...]
<script type="text/javascript">
function showTable(){

table = document.getElementById('gst');

Of course, you are _not_ creating a new table with the same ID here.

But since you do not declare the `table' identifier, you try to add a
globally available property. That may not be possible in IE, because
there is an object before the Global Object in the scope chain that
does not allow adding properties with certain names. Try

var table = ...;

instead.

var x=table.insertRow(1);
var y=x.insertCell(0);
var z=x.insertCell(1);

Missing feature tests.

x.setAttribute('onclick','openWindow('+' '+'1,lease_list)');

There is no point in this concatenation.

x.setAttribute('onclick', 'openWindow(1, lease_list)');

But setAttribute() has buggy implementations, so you should avoid it.
Use

x.onclick = function()
{
openWindow(1, lease_list);
};

or (IE4-proprietary)

x.attachEvent(
'onclick',
function()
{
openWindow(1, lease_list);
});

or (standards compliant)

x.addEventListener(
'click',
function()
{
openWindow(1, lease_list);
},
false);

For maximum compatibility, you should combine those approaches.

See also said:
cl="odd";

var cl = "odd";

x.setAttribute('class',cl);

x.className = cl;

x.setAttribute('onmouseover','this.className="over"');
x.setAttribute('onmouseout','this.className="'+cl+'"');

See above.

y.innerHTML="NEW CELL1";
z.innerHTML="NEW CELL2";

Avoid `innerHTML' if the new content is only a text node.

function isMethod(a)
{
var t;
return (a && ((t = typeof a) == "function" || t == "object")));
}

if (isMethod(y.appendChild)
&& isMethod(z.appendChild)
&& isMethod(document.createTextNode))
{
y.appendChild(document.createTextNode("NEW CELL1"));
z.appendChild(document.createTextNode("NEW CELL2"));
}
else if (typeof y.innerText != "undefined"
&& typeof z.innerText != "undefined")
{
y.innerText = "NEW CELL1";
z.innerText = "NEW CELL2";
}
else if (typeof y.innerHTML != "undefined"
&& typeof z.innerHTML != "undefined")
{
y.innerHTML = "NEW CELL1";
z.innerHTML = "NEW CELL2";
}

Another possibility for a combining wrapper method here.

}

showTable();

PointedEars

RobG · Apr 2, 2006

Gérard Talbot said:
Mahmoud wrote :

There is little to recommend XHTML. There is certainly nothing in the
posted code to suggest it is necessary, use HTML unless you have a really
good reason for using XHTML.

When styles are part of the problem, you need to include a minimal style
element so the code works as posted.

Your markup is invalid without a title element.

</head>

<body>

<table id="gst">

Click to expand...

[...]

</table>

<script type="text/javascript">
function showTable(){

table = document.getElementById('gst');

Click to expand...

Right here, you are creating a second table which will have the same id
attribute value as the first one.

Not at all. 'table' is a reference to the existing table with id='gst'.

[...]

You also have declare table as a global variable... when it doesn't seem
necessary to do so.

You need to create a tbody first and append it to the table first; MSIE
requires this in order to be able to insert row to it.

A tbody is created when the HTML for the table is parsed, so the fact that
the browser has already parsed the HTML for the subject table means it has
a tbody.

inesertRow() is a method of the table interface and is intended to be used
exactly as the OP has used it, that is:

tableElementReference.insertRow(index)

This won't work.

Yup. Also, to the OP, where is 'lease_list' defined?

You should avoid resorting to setAttribute() because IE has a number of
flaws, bugs on this method. And you can avoid declaring the cl variable.

I'll add that the OP should also have included a style element with the
required classes defined. Nothing worse than having work out what is
broken because of errors and what has simply been omitted.

x.className = "odd";
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-95362176

x.onmouseover = new Function("evt", "this.className = 'over';");

Hmmm. Calling the Function object as a constructor is not liked and should
probably be avoided where possible. There seems little point in passing
'evt'. Try:

x.onmouseover = function(){this.className = 'over';};

Looking at the event might be useful if the OP had a generic function that
used the event type to work out whether to highlight the row or return it
to odd/even class, but that doesn't seem to be happening here.

Where was 'cl' defined? Is it a variable or string value?

[...]

You should call the showTable() only and only when the document has been
fulled loaded and parsed and once the DOM tree has been built: this is
for best results (speed, memory management, avoid crashing on some other
browsers, etc.). It may work while loading the document but I would
still discourage such coding practice.

Maybe, but then users will see the page load and render, then the new
elements get added.

Which browsers have difficulty with elements being added while the page loads?

[...]

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	Jan 10, 2021
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button>	1	Apr 22, 2023
Only one table shows up with the information	2	Mar 29, 2023
Show/Hide div NOT workink in IE	10	Jun 15, 2009
XML Parsing Problem in Internet Explorer	1	Oct 11, 2008
Javascript / FireFox help needed	9	Jul 20, 2007
Changing Data without Refreshing Page	30	Oct 16, 2005
Internet Explorer Woes	3	Aug 8, 2007

dhtml style in IE internet explorer

Mahmoud

Gérard Talbot

Thomas 'PointedEars' Lahn

RobG

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads