JS, DOM and tr... IE problems!

D

deste

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 <tr> on onMouseOver DOM event;
- Check a checkbox on click on a <tr> and change <tr> background 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">
<!--
function select_line(pForm,pObj,index)
{
var elem = pForm[pObj + '[]'];
elem[index].checked = !elem[index].checked;
}

function mouseOutRow(pForm,pRow,pObj,index,class)
{
var elem = pForm[pObj + '[]'];
if(elem[index].checked == true)
{
pRow.className='line_selected';
}
else
{
pRow.className=class;
}
}

// -->
</script>

</head>

<body>

<form name="myForm">
<table>
<tr>
<td>&nbsp;</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 <tr> tag: 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
<tr> tag? 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!
 
D

deste

Hi David,

Thank you for your answer!
I'm trying to add <tbody> tag... 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....
 
R

RobG

deste said:
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 <tr> on onMouseOver DOM event;
Click to expand...

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... :)
- Check a checkbox on click on a <tr> and change <tr> background 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)...
Click to expand...

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.

[...]
<script type="text/javascript">
<!--
Click to expand...

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

[...]
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 <tr> tag:
Click to expand...

A notion that is easily disproved:

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

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

events... It work!
Click to expand...

So it does work? I'm confused.

I don't understand why this... Maybe I can't use these DOM events on
<tr> tag? Or I mistake something?
Click to expand...

Yes, you can.
Please, try to help me if you can!
Click to expand...

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!!!!
:)

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

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>
 
D

deste

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>
 
B

Bas Cost Budde

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... :)
Click to expand...

It is not just personal preference. For your document to validate under
XHTML, attribute names must be lowercase.
Don't use HTML comment delimiters inside script tags, they are useless
and likely to cause problems (though not in this case).
Click to expand...

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

deste

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">
<!--
function test(class) { alert(class); }
// -->
</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">
<!--
function test(something_different_class) {
alert(something_different_class); }
// -->
</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 ---
 

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

Similar Threads

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
Javascript DOM 1
I am using 2 loops, 1 for input and 1 for td. Can we achieve the same functionality with 1 loop in Jquery? 4
I need help fixing my website 2
Help with Visual Lightbox: Scripts 2
cambiar borde celda DOM onmouseover - problemas 7
DOM for IE and Firefox 6
Checking dynamically populated data using ajax with user entered value 5

Members online

Total: 63 (members: 2, guests: 61)
Robots: 378

Forum statistics

Threads
473,968
Messages
2,570,154
Members
46,702
Latest member
LukasConde

Latest Threads

Top