Excellent Frank, thanks a million !!!
What was your inspiration for this ?
- Glenn
"Frank W. Zammetti" <[EMAIL PROTECTED]>
28/04/2005 10:47 AM
Please respond to
"Struts Users Mailing List" <user@struts.apache.org>
To
"Struts Users Mailing List" <user@struts.apache.org>
cc
"Struts Users Mailing List" <user@struts.apache.org>
Subject
Re: [OT] DOM & JavaScript
Classification
Ah, got it! You can use an anonymous function... The suggestion of
setting a common handler is fine except that you will have to use
getElementById to get a reference to the element to change... using an
anonymous function you have access to the this keyword, so it's cleaner.
Here's a complete working page (at least in IE)...
<html>
<head>
<title>Test</title>
<style>
.hilite { background-color:#ff0000; }
.normal { background-color:#ffffff; }
</style>
<script>
function createTable(table) {
row = table.insertRow();
row.setAttribute("className", "normal");
row.onmouseover = function() { this.className='hilite'; }
row.onmouseout = function() { this.className='normal'; }
cell = row.insertCell();
cell.innerHTML = "new1";
cell = row.insertCell();
cell.innerHTML = "new2";
}
</script>
<head>
<body>
<table id="theTable" border="1">
<tr onMouseOver="this.className='hilite';"
onMouseOut="this.className='normal';">
<td>dummy1</td><td>dummy2</td>
</tr>
</table>
<input type="button" onClick="createTable(theTable);" value="Add Row">
</body></html>
--
Frank W. Zammetti
Founder and Chief Software Architect
Omnytex Technologies
http://www.omnytex.com
On Thu, April 28, 2005 9:58 am, [EMAIL PROTECTED] said:
> Merci Laurent !
>
> Okay so then when you say that it must be functions..
> I presume that the HTML with coded attributes such as onMouseOver and
> onMouseOut... in IE the browser parses the data and internally creates
> functions to handle the mouse events.
> So when I try to dynamically modify the DOM for IE... I must recreate
the
> mouse handlers.
> Would this be a valid way of describing the situation?
>
> I must now understand the element hierarchy along with the event firing
> sequence...
> Since I'd like to hilite the row... now it is hiliting the cell of a
> row... :(
>
> - Glenn
>
>
>
> Laurent <[EMAIL PROTECTED]>
> 28/04/2005 09:11 AM
> Please respond to
> "Struts Users Mailing List" <user@struts.apache.org>
>
>
> To
> Struts Users Mailing List <user@struts.apache.org>
> cc
>
> Subject
> Re: [OT] DOM & JavaScript
> Classification
>
>
>
>
>
>
>
>
> [EMAIL PROTECTED] wrote:
>> // Only add a row when changing the last row of the table
>> if ("s"+(rowWithData) == selectId) {
>> var row = table.insertRow(lastRowInTable);
>> var className = "rowNormal";
>>
>> if (lastRowInTable % 2 == 0) {
>> className = "rowAlternate";
>> }
>> row.className = className;
>> row.setAttribute("onmouseover", "this.className = 'hilite';");
>> row.setAttribute("onmouseout", "this.className = '" + className
> +
>> "'");
>
>
> That's not how it works (not in IE at least). The event attributes'
> values should be event listeners (i.e. functions), not strings of
> javascript code.
>
> Try this:
>
> function changeClassName(e) {
> if (!e) e=window.event;
> getEventTarget(e).setAttribute("class", "hilite"); // DOM-compliant
> getEventTarget(e).setAttribute("className", "hilite"); // MSIE
> }
>
> row.onmouseover = changeClassName; // without quotes nor parentheses
>
> function getEventTarget(e) {
> if (e.srcElement) return e.srcElement;
> else return e.currentTarget;
> }
>
> Note: the code above aims to be cross-browser, as IE behaves completely
> differently from any other browser.
>
> BTW, all event attributes are *lower case*: onmouseover, onmouseout (not
> onMouseOver...)
>
> Hope this helps.
>
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: [EMAIL PROTECTED]
> For additional commands, e-mail: [EMAIL PROTECTED]
>
>
>
>
---------------------------------------------------------------------
To unsubscribe, e-mail: [EMAIL PROTECTED]
For additional commands, e-mail: [EMAIL PROTECTED]
