Setting onMouseOut attribute within JavaScript

R

relaxedrob

Howdy All!

I am really stuck with this one - I want to completely create a table
within JavaScript and insert it into the document, with onMouseOut and
onMouseOver handlers in the table rows.

Below is a sample of the code I have created. It all works in Netscape
7.1, but in IE 6 it shows the table but the handlers do not run. I can
prove the handlers are even there (see the commented out alert command
in the code) so why aren't they being called??

Any help on this problem would be most appreciated!

Rob
:)


<html><head><title>Untitled Document</title>
<script type="text/javascript" language="JavaScript">
function setAttribute (object, attributeName, attributeValue)
{
var attributeNode = document.createAttribute (attributeName);
attributeNode.value = attributeValue;
object.setAttributeNode (attributeNode);
} // end setAttribute method
function writeTable()
{
var menuTable = document.createElement ("table");
var tableBody = document.createElement ("tbody");
menuTable.appendChild (tableBody);
menuTable.setAttribute ("width", "100%");
menuTable.setAttribute ("border", "0");
menuTable.setAttribute ("cellPadding", "0");
menuTable.setAttribute ("cellSpacing", "0");

// Create a table row for each node in menu array.
for (var index = 0; index < 10; index ++)
{
var tableRow = document.createElement ("tr");
setAttribute (tableRow, "onMouseOut", "alert ('mouse out');");
setAttribute (tableRow, "onMouseOver", "alert ('mouse over');");

// alert (tableRow.onmouseout);

var tableCell = document.createElement ("td");
var cellText = document.createTextNode ("Test Row");
tableCell.appendChild (cellText);
tableRow.appendChild (tableCell);
tableBody.appendChild (tableRow);
} // end for
document.getElementById ("mainMenuContainer").appendChild
(menuTable);
}
</script></head>
<body onLoad="writeTable();">
<div id="mainMenuContainer"></div>
</body>
</html>
 
D

DU

Howdy All!

I am really stuck with this one - I want to completely create a table
within JavaScript and insert it into the document, with onMouseOut and
onMouseOver handlers in the table rows.

Below is a sample of the code I have created. It all works in Netscape
7.1, but in IE 6 it shows the table but the handlers do not run. I can
prove the handlers are even there (see the commented out alert command
in the code) so why aren't they being called??

Any help on this problem would be most appreciated!

Rob
:)


<html>

Using a full doctype declaration will trigger MSIE 6 for Windows into
standards compliant rendering mode. It's always preferable, furthermore
if you're using DOM 2 HTML interface methods.

<script type="text/javascript" language="JavaScript">
function setAttribute (object, attributeName, attributeValue)

Very bad function name: there is a DOM 2 Core Interface method with such
name. You're making your code a lot harder to figure out here.

http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-F68F082
{
var attributeNode = document.createAttribute (attributeName);
attributeNode.value = attributeValue;

objRef.setAttribute(name, value);
is faster and more to the point, as explained by the specs.
object.setAttributeNode (attributeNode);

the setAttributeNode method does not work well on many browsers.
} // end setAttribute method
function writeTable()
{
var menuTable = document.createElement ("table");
var tableBody = document.createElement ("tbody");
menuTable.appendChild (tableBody);

You should define the tbody element, then assign its properties and
attributes before appending it to the menuTable element. The rest of
your DOM nodes declaration, construction follows that logic.
menuTable.setAttribute ("width", "100%");

menuTable.width = "100%";
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-77447361
And even here, this is not useful really as the default width value of a
table is always 100% on all browsers.
menuTable.setAttribute ("border", "0");

menuTable.border = "0";
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-50969400
[
General rule: don't use setAttribute() when a better way of setting the
attribute is available (ie. x.style.display="none" instead of
x.setAttribute('style,'display: none')).
http://www.xs4all.nl/~ppk/js/w3c_core.html#attributes
]

menuTable.setAttribute ("cellPadding", "0");
menuTable.setAttribute ("cellSpacing", "0");

menuTable.cellPadding = "0";
menuTable.cellSpacing = "0";
// Create a table row for each node in menu array.
for (var index = 0; index < 10; index ++)
{
var tableRow = document.createElement ("tr");

insertRow is another alternative, also supported by MSIE 6 for Windows,
NS 6.2+ (and Mozilla-based browsers) and Opera 7.x
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-39872903
setAttribute (tableRow, "onMouseOut", "alert ('mouse out');");

tableRow.setAttribute("onmouseout", "alert('mouse out')");
will work in Mozilla 1.4 and Opera 7.20. It is known that MSIE 6 for
windows does not support changing, modifying, setting event attributes.
I remember answering a post on this issue in, IIRC, this newsgroup.
setAttribute (tableRow, "onMouseOver", "alert ('mouse over');");

// alert (tableRow.onmouseout);

var tableCell = document.createElement ("td");

insertCell is also a method supported by Mozilla-based browers, Opera
7.x and MSIE 6. I personally prefer it over createElement because it's a
bit more faster. insertCell creates and append the node with 1 line of code.
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-68927016
var cellText = document.createTextNode ("Test Row");
tableCell.appendChild (cellText);

or
tableCell.appendChild(document.createTextNode ("Test Row"));
tableRow.appendChild (tableCell);
tableBody.appendChild (tableRow);
} // end for
document.getElementById ("mainMenuContainer").appendChild
(menuTable);
}
</script></head>
<body onLoad="writeTable();">
<div id="mainMenuContainer"></div>
</body>
</html>


DU
--
Javascript and Browser bugs:
http://www10.brinkster.com/doctorunclear/
- Resources, help and tips for Netscape 7.x users and Composer
- Interactive demos on Popup windows, music (audio/midi) in Netscape 7.x
http://www10.brinkster.com/doctorunclear/Netscape7/Netscape7Section.html
 

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

Members online

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,020
Latest member
GenesisGai

Latest Threads

Top