JS, DOM and tr... IE problems!

Hi folks!

I've got a problem with javascript and DOM.
I want to create a simple "intelligent" <table>, inside a data-form.
I'd like to do:
- Change color of any <tron onMouseOver DOM event;
- Check a checkbox on click on a <trand change <trbackground color.

Do you ever use phpMyAdmin? Well, the effect i'd like to get it's the
same that it's used in phpMyAdmin's tables. I try to look at phpMyAdmin
source code... But it's too difficult for me. ;-)

Let me show you my simple example file (in php format)...

- - - - - -

<html>
<head>
<title>test page</title>

<style type="text/css">
tr.even { background-color:#e5e5e5; }
tr.odd { background-color:#d5d5d5; }
tr.line_over { background-color:#ccffcc; }
tr.line_selected { background-color:#ffcc99; }
</style>

<script type="text/javascript">

</script>

</head>

<body>

<form name="myForm">
<table>
<tr>
<td> </td>
<td>#</td>
<td>value</td>
</tr>

<?
for($i=0;$i<10;$i++)
{
?>
<tr name="tr_line[]"
class="<? if($i%2==0) { print "even"; } else { print
"odd"; } ?>"
onClick="select_line(document.myForm,'px',<? print $i;
?>);"
onMouseOver="this.className='line_over';"
onMouseOut="mouseOutRow(document.myForm,this,'px', <?
print $i; ?>,'<?
if($i%2==0) { print "even"; } else { print "odd"; } ?>');">

<td width="25"><input type="checkbox" name="px[]" /></td>
<td width="25"><? print $i+1; ?></td>
<td>test row</td>
</tr>
<?
}
?>
</table>
</form>
</body>
</html>

- - - - - -

With Firefox it works fine; but it doesn't work with Internet Explorer!
IE seems to don't use javascript functions in DOM events of <trtag: I
try to set only .style.background-color in "onMouseOut" and other
events... It work!

I don't understand why this... Maybe I can't use these DOM events on
<trtag? Or I mistake something?

Please, try to help me if you can!
In alternative, do you know another way to do my tables?

Thanks a lot, folks!

I vaguely recall from some past experience that IE can't properly parse
tables into the DOM tree unless there's a <tbodyelement - that is,
<trshould be child of <tbodynot directly of <table>:

<table>
<tbody>
<tr><td>stuff here</td></tr>
</tbody>
</table>

Of course this has nothing to do with any standards since the W3C says
that TR can come below either <tableor <tbody>, but you know IE's
relationship to standards... Try that and see if it works for you.

-David

Hi David,

Thank you for your answer!
I'm trying to add <tbodytag... But nothing change. :-(

Any other ideas?

ps.. Of course David: I know IE's standard problems... It always does
not like my css code! Eheheh....

deste wrote:

Quote:

Hi folks!
>
I've got a problem with javascript and DOM.
I want to create a simple "intelligent" <table>, inside a data-form.
I'd like to do:
- Change color of any <tron onMouseOver DOM event;

Capitalisation is often used in HTML markup, however I find it
misleading. In script you must write onmouseover, so better to use the
same in the HTML. Just a personal preference of course... :-)

Quote:

- Check a checkbox on click on a <trand change <trbackground color.
>
Do you ever use phpMyAdmin? Well, the effect i'd like to get it's the
same that it's used in phpMyAdmin's tables. I try to look at phpMyAdmin
source code... But it's too difficult for me. ;-)
>
Let me show you my simple example file (in php format)...

Don't post server code, keep that for a php group. Post what your
browser actually receives, once you sort that out, how you get it there
is up to you.

[...]

Quote:

Don't use HTML comment delimiters inside script tags, they are useless
and likely to cause problems (though not in this case).

[...]

Quote:

>
With Firefox it works fine; but it doesn't work with Internet Explorer!
IE seems to don't use javascript functions in DOM events of <trtag:

A notion that is easily disproved:

<table><tr onmouseover="alert('hey');"><td>blah</table>

Quote:

I
try to set only .style.background-color in "onMouseOut" and other

You should be setting: style.backgroundColor. When using CSS
properties in javascript, hyphenated names must be converted to
"camelCase".

Quote:

events... It work!

So it does work? I'm confused.

Quote:

>
I don't understand why this... Maybe I can't use these DOM events on
<trtag? Or I mistake something?

Yes, you can.

Quote:

>
Please, try to help me if you can!

If you post what your browser is actually getting (e.g. using view
source or the generated source), then more help can be offered.
Othewise you are asking someone to load your PHP on a server and
deliver it to a browser to debug, or be a sufficiently good PHP
developer that they can see the bugs in the code. Count me out!!!!
:-)

Quote:

In alternative, do you know another way to do my tables?

I think your approach using CSS classes is the best one. While the
:hover pseudo-class is supported by a wide variety of browsers, it
isn't supported by IE<7, so script is your only option:

<head>
<title>tr play</title>
<style type="text/css">
.blue {background-color: #ddddff;}
.pink {background-color: #ffdddd;}
</style>
</head>
<table>
<tr onmouseover="this.className='blue';"
onmouseout="this.className='pink';">
<td>blah</td>
</tr>
</table>

--
Rob

Thank you very much Rob for your suggestions!
And excuse me for my mistakes (php code etc...) ;-)

I try to apply some changes...
Don't ask me why, but now it works! :pPpp
I'll try to understand later why before my script didn't work and now
yes... It seems to be the same... (??).

If you are interested, this is the code...

----------

<html>
<head>
<title>test page</title>

<style type="text/css">
tr.even { background-color:#e5e5e5; }
tr.odd { background-color:#d5d5d5; }
tr.line_over { background-color:#ccffcc; }
tr.line_selected { background-color:#ffcc99; }
</style>

<script type="text/javascript">
function select_line(pForm,pObj,index)
{
var elem = pForm[pObj + '[]'];
elem[index].checked = !elem[index].checked;
}
function mouse_over(pRow) { pRow.className='line_over'; }
function mouse_out(pForm,pRow,pObj,index,css_class)
{
var elem = pForm[pObj + '[]'];
if(elem[index].checked == true)
{
pRow.className='line_selected';
}
else
{
pRow.className=css_class;
}
}
</script>

</head>

<body>
<form name="myForm">
<table>
<tbody>
<tr name="tr_line[]" class="even"
onclick="select_line(document.myForm,'px',0);"
onmouseover="mouse_over(this);"

onmouseout="mouse_out(document.myForm,this,'px',0, 'even');">
<td><input type="checkbox" name="px[]"
onclick="select_line(document.myForm,'px',0);" /></td>
<td>first line bla bla bla...</td>
</tr>

<tr name="tr_line[]" class="odd"
onclick="select_line(document.myForm,'px',1);"
onmouseover="mouse_over(this);"

onmouseout="mouse_out(document.myForm,this,'px',1, 'odd');">
<td><input type="checkbox" name="px[]"
onclick="select_line(document.myForm,'px',1);" /></td>
<td>second line bla bla bla...</td>
</tr>

</tbody>
</table>
</form>

</body>
</html>

----------

Bye bye, and thanks for your help. :-)

Capitalisation is often used in HTML markup, however I find it

Quote:

misleading. In script you must write onmouseover, so better to use the
same in the HTML. Just a personal preference of course... :-)

It is not just personal preference. For your document to validate under
XHTML, attribute names must be lowercase.

Quote:

> <script type="text/javascript">
> <!--

>
Don't use HTML comment delimiters inside script tags, they are useless
and likely to cause problems (though not in this case).

A leftover from *really* old browsers that didn't understand script
tags. Now, what about <![CDATA[ ... script code ]]? :D

--
Bas Cost Budde
Holland
www.heuveltop.nl/BasCB/msac_index.html

Ohhh... I understand why my first code don't works in IE, folks!! :-))
If you are interesting, let me explain you what is the real problem
(take a look... Can will be usefull to know it...)

This code DON'T work in IE...
----------
<html>
<head>
<script type="text/javascript">

</script>
</head>
<body>
<a href="#" onclick="test('don\'t work in IE !');">click here to
test...</a>
</body>
</html>
----------

....But this works fine:
----------
<html>
<head>
<script type="text/javascript">

</script>
</head>
<body>
<a href="#" onclick="test('this code works in IE !');">click here
to test...</a>
</body>
</html>
----------

Ouch! F*ck!
Don't ask me why... But in I.E. 6 (I don't know in < or 6 versions),
you can't use "class" as variable's name in a function! :-)

Thanks a lot to David, Rob and Bas for their answers!

PS about comment tags...
<script>

</script>
Comment tags, as Bas say, must be used for *very* old browser that
doesn't support Javascript... But is better use it also for new devices
different from computer (like cellular phones...) that can don't
understand javascript and for web crawler (like GoogleBot and others):
they don't need to read our javascript code.

See u!

--- EOF ---