SitePoint Sponsor |
|
User Tag List
Results 1 to 6 of 6
-
Mar 16, 2007, 08:57 #1
- Join Date
- Mar 2007
- Posts
- 3
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
event.srcElement not working in Firefox
I've seen others post about this but I can't find an answer to my particular problem.
In my application, I'm displaying an HTML table as a grid. Each TD cell has its own unique ID assigned to it. When the user clicks within that TD cell, I call the following JS function:
Code:function OnFieldClick(vBoxCol,nBoxRow) { if (event.srcElement.style.backgroundColor=="yellow") { event.srcElement.style.backgroundColor = event.srcElement.orgBGColor; document.form1.cells.value = remove(document.form1.cells.value,vBoxCol + '_' + nBoxRow + ','); } else { alert('In else') event.srcElement.style.backgroundColor = "yellow" document.form1.cells.value = document.form1.cells.value + vBoxCol + '_' + nBoxRow + ',' } }
Thanks everyone!
-
Mar 16, 2007, 09:11 #2
- Join Date
- Nov 2004
- Location
- Nelson BC
- Posts
- 2,310
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
pass the parameter "this" to the function. That represents the TD that was clicked (assuming the event handler is part of the td).
eg
<tr><td onclick="onfieldclick(this,'other param','param2');">test</td></tr>
then in the function you can use dom methods to get a reference to the TR
Code:function onfieldclick(clickedElement,param1,param2) { var theTR = clickedElement.parentNode; alert("tr id is " + theTR.id); // etc }
-
Mar 16, 2007, 09:25 #3
- Join Date
- Mar 2007
- Posts
- 3
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
A little
Well..that's a little better, but I still can't seem to get the background color of the cell. Any ideas? I've tried:
clickedEvent.style.backgroundColor
but this just comes up blank... However, if I take out the label backgroundColor, I get the object CSSStyleDeclaration
-
Mar 16, 2007, 10:01 #4
- Join Date
- Aug 2006
- Posts
- 266
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Code:<script type="text/javascript"> function changeColor(e,a,b){ e=window.event || e; var obj= e.srcElement || e.target; var el= document.getElementById("tableid"); for(var i = 0; i< el.rows.length; i++) { el.rows[i].style.backgroundColor=a; } obj.parentNode.style.backgroundColor=b; } </script> <table id="tableid"> <tr><td onclick="changeColor(event,'red','blue')">cell0</td></tr> <tr><td onclick="changeColor(event,'lime','yellow')">cell1</td></tr> <tr><td onclick="changeColor(event,'turquoise','orange')">cell2</td></tr> </table>
Last edited by muazzez; Mar 16, 2007 at 11:37.
Bismillahirrahmanirrahîm
Bizi doğru yola, kendilerine nimet verdiklerinin yoluna ilet; gazaba uğrayanların ve sapıklarınkine değil.
-
Mar 16, 2007, 10:09 #5
- Join Date
- Nov 2004
- Location
- Nelson BC
- Posts
- 2,310
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
This example might be a little complex but check it out:
Code:<html> <head> <style type="text/css"> td { height: 100px; width: 100px; } .green { background-color: green; } .blue { background-color: blue; } .red { background-color: red; } .orange { background-color: orange; } </style> <script type="text/javascript"> // array to remember the "yellow" tds, and their original colors var selectedTDs = []; function clickCell() { // find out if the clicked TD is already in selectedTDs for (var i=0; i < selectedTDs.length; i++) { if (this === selectedTDs[i].obj) { // we found it, set it back to its original color, remove it from the array, and return this.style.backgroundColor = selectedTDs[i].bgc; selectedTDs.splice(i,1); return; } } // didn't find it so lets add it to the array and make the bg yellow var tdInfo = {"obj":this, "bgc":this.style.backgroundColor}; selectedTDs.push(tdInfo); this.style.backgroundColor = "yellow"; } window.onload = function () { var cal = document.getElementById("mytable"); var tds = cal.getElementsByTagName("td"); for (var i=0; i < tds.length; i++) { tds[i].onclick = clickCell; } } </script> </head> <body> <table id="mytable"> <tr><td style="background-color:purple">1</td><td class="green">2</td></tr> <tr><td class="orange">3</td><td class="blue">4</td></tr> </body> </html>
-
Mar 16, 2007, 10:18 #6
- Join Date
- Mar 2007
- Posts
- 3
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Ummm...yeah
Yeah..that's a bit too complicated. Here's one issue I found. I originally was putting the background color of the TD cell in a variable called BGColor. This made the cell the right color and IE could grab the value. However, Firefox doesn't. So then I took that and placed it in style="background-Color:#FFCC33".
When I use event.style.backgroundColor, it brings be back RGB(###, ###, ###). How do I get it to bring me back the hex value instead of the RGB value?
Bookmarks