onclick on IE7 in table elements

Marko Mikkonen · May 11, 2007

I'm trying to make code which does something when user clicks a row in a
table. I tried a javascript code from JS-Examples.com. It works on
Firefox, but not on Internet explorer 7. Here's the code:

<html>
<head>


<style>
..c1 {background-color: #ACF;}
..c2 {background-color: #FCA;}
..c3 {background-color: #CFA;}
</style>
<script>
function ov(i)
{
document.getElementById(i).className="c3";
}
function ot(i,c)
{
document.getElementById(i).className=c;
}
function click(num)
{
alert("You choose Item #"+num);
}
</script>

</head>
<body>

<table>
<tr id=i1 class=c1 onclick='click(1)' onmouseover='ov("i1")'
onmouseout='ot("i1","c1")'><td>one</td><td>two</td><td>three</td></tr>
<tr id=i2 class=c2 onclick='click(2)' onmouseover='ov("i2")'
onmouseout='ot("i2","c2")'><td>one</td><td>two</td><td>three</td></tr>
<tr id=i3 class=c1 onclick='click(3)' onmouseover='ov("i3")'
onmouseout='ot("i3","c1")'><td>one</td><td>two</td><td>three</td></tr>
<tr id=i4 class=c2 onclick='click(4)' onmouseover='ov("i4")'
onmouseout='ot("i4","c2")'><td>one</td><td>two</td><td>three</td></tr>
<tr id=i5 class=c1 onclick='click(5)' onmouseover='ov("i5")'
onmouseout='ot("i5","c1")'><td>one</td><td>two</td><td>three</td></tr>
</table>
<BR><center><a
href='http://www.js-examples.com'>JS-Examples.com</a></center>
</body>
</html>

I also tried moving the onclick under td tags, but still IE 7 wouldn't
work. Onmouseover and onmouseout events seem to work fine in both IE7 and
Firefox.

Does the code work for you on IE7? What could be the problem?

-Marko

ASM · May 11, 2007

Marko Mikkonen a écrit :

I'm trying to make code which does something when user clicks a row in a
table. I tried a javascript code from JS-Examples.com. It works on
Firefox, but not on Internet explorer 7. Here's the code:

<html>
<head>


<style>
.c1 {background-color: #ACF;}
.c2 {background-color: #FCA;}
.c3 {background-color: #CFA;}
</style>
<script>

Marko Mikkonen · May 14, 2007

You just touched ov and ot functions! And they worked fine (untill you
touched them :| )! The problem is the click function. Anyone?

Marko Mikkonen · May 14, 2007

I found out the cause of the problem. I changed the function click's name to
something else (like dothatclick). Apparently "click" is a reserved word or such
in IE7?

Marko Mikkonen said:
You just touched ov and ot functions! And they worked fine (untill you
touched them :| )! The problem is the click function. Anyone?

ASM said:
ASM said:

Marko Mikkonen a ?crit :
<script type="text/javascript">
document.getElementById('i'+i).className="c3";
document.getElementById('i'+i).className=c;

Click to expand...

ASM · May 14, 2007

Marko Mikkonen a écrit :

You just touched ov and ot functions! And they worked fine (untill you
touched them :| )! The problem is the click function. Anyone?

touch the click function as ov and ot were ... no ?

the easiest way would be :

someElement.onclick = function() { aFunction(this); };

<html>
<script type="text/javascript">
function whatIs(what) {
alert('something to do with ' + what.id);
}
function roll(what) {
what = what.style;
what.backgroundColor = what.backgroundColor==''?
'yellow' : '';
}
var IE=false; /*@cc_on IE=true; @*/
onload = function() {
var p = document.getElementsByTagName('P');
for(var i=0; i<p.length; i++) {
p.onclick = function() { whatIs(this); };
p.onmouseover = function() { roll(this); };
p.onmouseout = function() { roll(this); };
p.cursor = IE? 'hand' : 'pointer';
}
}
</script>
<p id="text_1"> text 1 </p>
<p id="text_2"> text 2 </p>
<p id="text_3"> text 3 </p>
</html>

to adapt to your table ...

ASM · May 14, 2007

Marko Mikkonen a écrit :

I found out the cause of the problem. I changed the function click's name to
something else (like dothatclick). Apparently "click" is a reserved word or such
in IE7?

Ho ! I'vn't take care of that !

click() is a JS native function to simulate a mouse click

document.myForm.myElement.click()

You can use : function Click() { blah }

http://fr.selfhtml.org/navigation/recherche/index.htm
(in french, but the reserved words are the same

)

Marko Mikkonen · May 14, 2007

Ok, thank you.

ASM said:
Marko Mikkonen a écrit :

Ho ! I'vn't take care of that !

click() is a JS native function to simulate a mouse click

You can use : function Click() { blah }

http://fr.selfhtml.org/navigation/recherche/index.htm
(in french, but the reserved words are the same )

Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button>	1	Apr 21, 2023
Hello I am learning how to code and I tried making a calculator with HTML and js with some CSS I am stuck at thing, Like the screen value is	0	Mar 13, 2025
Filter table rows based on multiple checkboxes value	2	Jan 13, 2023
Only one table shows up with the information	2	Mar 29, 2023
slow response in table cells <TD> to mouseover with IE6 but fine inFirefox.	4	Jun 1, 2008
Mouse over effect, onclick select for alternate row colors table	4	May 16, 2006
onClick not firing for an ImageMap Area	6	Jun 4, 2008
javascript in firefox fine but in IE it chokes on a long string??	2	Nov 2, 2007

onclick on IE7 in table elements

Marko Mikkonen

ASM

Marko Mikkonen

Marko Mikkonen

ASM

ASM

Marko Mikkonen

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads