473,320 Members | 1,572 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

onclick on IE7 in table elements

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>
<!--
This file retrieved from the JS-Examples archives
http://www.js-examples.com
1000s of free ready to use scripts, tutorials, forums.
Author: JS-X.com - http://js-x.com/contact/
-->

<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
May 11 '07 #1
6 4871
ASM
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>
<!--
This file retrieved from the JS-Examples archives
http://www.js-examples.com
1000s of free ready to use scripts, tutorials, forums.
Author: JS-X.com - http://js-x.com/contact/
-->

<style>
.c1 {background-color: #ACF;}
.c2 {background-color: #FCA;}
.c3 {background-color: #CFA;}
</style>
<script>
<script type="text/javascript">
function ov(i)
{
document.getElementById(i).className="c3";
document.getElementById('i'+i).className="c3";
}
function ot(i,c)
{
document.getElementById(i).className=c;
document.getElementById('i'+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>


--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date
May 11 '07 #2
You just touched ov and ot functions! And they worked fine (untill you
touched them :| )! The problem is the click function. Anyone?

ASM <st*********************@wanadoo.fr.invalidwrote :
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>
<!--
This file retrieved from the JS-Examples archives
http://www.js-examples.com
1000s of free ready to use scripts, tutorials, forums.
Author: JS-X.com - http://js-x.com/contact/
-->

<style>
.c1 {background-color: #ACF;}
.c2 {background-color: #FCA;}
.c3 {background-color: #CFA;}
</style>
<script>
<script type="text/javascript">
function ov(i)
{
document.getElementById(i).className="c3";
document.getElementById('i'+i).className="c3";
}
function ot(i,c)
{
document.getElementById(i).className=c;
document.getElementById('i'+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>

--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date
May 14 '07 #3
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 <mm******@paju.oulu.fiwrote:
You just touched ov and ot functions! And they worked fine (untill you
touched them :| )! The problem is the click function. Anyone?
ASM <st*********************@wanadoo.fr.invalidwrote :
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>
<!--
This file retrieved from the JS-Examples archives
http://www.js-examples.com
1000s of free ready to use scripts, tutorials, forums.
Author: JS-X.com - http://js-x.com/contact/
-->
>
<style>
.c1 {background-color: #ACF;}
.c2 {background-color: #FCA;}
.c3 {background-color: #CFA;}
</style>
<script>
<script type="text/javascript">
function ov(i)
{
document.getElementById(i).className="c3";
document.getElementById('i'+i).className="c3";
}
function ot(i,c)
{
document.getElementById(i).className=c;
document.getElementById('i'+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>

--
Stephane Moriaux et son (moins) vieux Mac d?j? d?pass?
Stephane Moriaux and his (less) old Mac already out of date
May 14 '07 #4
ASM
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[i].onclick = function() { whatIs(this); };
p[i].onmouseover = function() { roll(this); };
p[i].onmouseout = function() { roll(this); };
p[i].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 <st*********************@wanadoo.fr.invalidwrote :
>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>
<!--
This file retrieved from the JS-Examples archives
http://www.js-examples.com
1000s of free ready to use scripts, tutorials, forums.
Author: JS-X.com - http://js-x.com/contact/
-->

<style>
.c1 {background-color: #ACF;}
.c2 {background-color: #FCA;}
.c3 {background-color: #CFA;}
</style>
<script>
><script type="text/javascript">
>>function ov(i)
{
document.getElementById(i).className="c3";
> document.getElementById('i'+i).className="c3";
>>}
function ot(i,c)
{
document.getElementById(i).className=c;
> document.getElementById('i'+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>


>--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date

--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date
Contact : http://stephane.moriaux.perso.wanadoo.fr/contact
ASM = Aimable Stéphane Moriaux = Amateur Sasseur Merdouilles
May 14 '07 #5
ASM
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 :-) )

--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date
May 14 '07 #6
Ok, thank you.

ASM <st*********************@wanadoo.fr.invalidwrote :
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 :-) )
--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date
May 14 '07 #7

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
by: A.S. | last post by:
Hi, I have the following simple code: <TABLE><TR> <TD BGCOLOR="#FFFFFF" ONCLICK="myform.color.value = this.bgcolor">hello</TD> </TR></TABLE> <FORM ACTION="hello.cgi" NAME="myform"...
6
by: Edward | last post by:
The code shown below displays a table in a form with 3 check boxes. When the left checkbox is selected, all other checkboxes are also selected (hotmail style) (thanks for the groups help with...
2
by: Andy Goldstein | last post by:
I have a table where all the TRs have an onClick handler registered. One (and only one) of the rows has 2 text input boxes, where each textbox has an onChange handler registered. Both the onClick...
8
by: cool2005 | last post by:
I tried to dynamically add/clone a <tr> from an existing <tr> to a <table> but the problem is that I need to have a "onclick" event handler in the <tr>. I have tried following A. approach...
2
by: Corno | last post by:
Hi all, I have a page with a table of which the rows have to be added dynamically. What I also want is 'code behind' the onclick event of a row (the page should be posted back to the server,...
6
by: Luke Matuszewski | last post by:
Why window.onclick isn't fired in IE and is fired on Gecko agents ? <html onclick="alert('Event is now at the HTML element.')"> <head> <title>Event Bubbles</title> <script...
11
by: GaryB | last post by:
Hi Guys, I've been battling with this one for hours - I hope that you can help me! My code modifies the <aon a page, from a standard document link into a link with a tailored onclick event. ...
11
by: Daz | last post by:
Hello everyone. I am sure the answer to my question is simple, but I can't seem to dynamically add an onClick event to my script. I have a table which is generated dynamically, I am just...
1
by: PlutoPlanet | last post by:
Hello World, the code below shows 2 elements with "onClicks". In IE all 3 values are alerted when clicking one of the elements In FF only "this.id" is alerted on the table element and...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.