PDA

View Full Version : table row highlighting

Kram
02-26-2004, 08:07 PM
i want to be able to highlight a table row once ive clicked on it, that i can do...

The problem is that i want it to stay highlighted until i click another row which then the new row gets highlighted and the first one goes back to what it was.

Thanks in advance
Joe
02-26-2004, 08:09 PM
ummm not sure i understand what you want to do here :confused:

could you try explaining a bit more ..... well so i can understand :D any examples would be good aswell
Kram
02-26-2004, 08:16 PM
ok sorry...

I have a table which is just a simple table, nothing fancy...

What i want is to click on a table row, (we'll call this row tableRow1), and tableRow1 will be highlighted
code example
<tr bgcolor="lightblue" onClick="this.bgColor='lightyellow'">

this works fine, the problem is that if i want a different row to be highlighted when i click on it(tableRow2 for example), tableRow1 stays highlighted. I dont want it to.

hope that helps
Joe
02-26-2004, 08:24 PM
hmm i dont know alot about JavaScript but hopefully this will help

in the code for the table2 you have
tr bgcolor="lightblue" onClick="this.bgColor='lightyellow'"> this again yes? well what you want is another bit of code telling the other td background color to change back

thats the best description i can give sorry :o - i really must learn a bit more JS sometime
Kram
02-26-2004, 08:27 PM
Yeah thats what ive been working on, but like you, my skills are limited. LOL. But thanks anyway

Anyone else help????
Bizarro
02-26-2004, 11:51 PM
isnt there some kind of om mouse out sort of thing that you can use
agent002
02-27-2004, 02:11 AM
This script should do, add it between the <head> and </head> tags:
<script type="text/javascript"><!--
var prevclicked;
function ClickRow(which){
if(prevclicked){
prevclicked.style.backgroundColor = '';
}
which.style.backgroundColor = '#ff0000';
prevclicked = which;
}
--></script>
HTML:
<table>
<tr onclick="ClickRow(this);">
<td>Row 1</td>
</tr>
<tr onclick="ClickRow(this);">
<td>Row 2</td>
</tr>
<tr onclick="ClickRow(this);">
<td>Row 3</td>
</tr>
</table>
Kram
03-01-2004, 10:47 PM
ok ok, thats a perfect start, but just a few more adjustments would be fantastic...

1. make the row be un highlighted when you click on another row
2. when you click on the row again, it un-selects

if you can do this, your a champ...
agent002
03-02-2004, 09:02 AM
champ? sounds good, although I don't like mushrooms :P

here's your new code...
<script type="text/javascript"><!--
var chosenrow;

function ClickRow(which){
if(chosenrow == which){
chosenrow.style.backgroundColor = '';
chosenrow = null;
return false;
}
else if(chosenrow){
chosenrow.style.backgroundColor = '';
}
chosenrow = which;
which.style.backgroundColor = '#ff0000';
}

--></script>
Kram
03-02-2004, 04:42 PM
Holly crap your a mega champ... thanks heaps!
agent002
03-03-2004, 08:19 AM
no problem :)