on onclick: change row class

**emanuelle** · 05-01-2008, 11:05 AM

when click on row then show a different class(bg and font color changes)

Any suggestions?
txs

**Medyman** · 05-01-2008, 12:14 PM

Any suggestions?

Yes, GOOGLE!

**jscheuer1** · 05-01-2008, 02:52 PM

In about its simplest form:

HTML Code:

<span class="bob" onclick="this.className=this.className=='bob'? 'mary' :
'bob';" title="Click for Class Change">Bob or Mary on click</span>

Note: You would define the .bob and .mary classes in your stylesheet.

**emanuelle** · 05-01-2008, 05:01 PM

<tr class="bob" onclick="this.className=this.className=='bob'? 'mary' :
'bob';"><td>1</td></tr>

<tr class="bob" onclick="this.className=this.className=='bob'? 'mary' :
'bob';"><td>2</td></tr>

<tr class="bob" onclick="this.className=this.className=='bob'? 'mary' :
'bob';"><td>3</td></tr>

If I click on 1 it will hightlights if I click on 2 it will highlight but then 1 goes back to default color.
Only one highlighted at the time

How do I adjust this?

**jscheuer1** · 05-01-2008, 05:43 PM

I am assuming that you mean you want it to work that way, as it shouldn't be doing it like that as written in your post. For that, you need some way to collect all of the elements and act on them as a group. Also you have to decide what happens when only one is highlighted and that one is clicked on again. In most cases, you want them all to then be not highlighted.

Give this a shot:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.bob {
color:red;
}
.mary {
background-color:pink;
}
</style>
<script type="text/javascript">
function togGroup(el, classes){
for (var els=document.getElementsByTagName(el.tagName), i = els.length-1; i > -1; --i)
if (els[i]!==el&&els[i].className==classes.b)
els[i].className=classes.a;
el.className=el.className==classes.a? classes.b : classes.a;
}
</script>
</head>
<body>
<table>
<tr class="bob" onclick="togGroup(this, {a:'bob', b:'mary'});"><td>1</td></tr>

<tr class="bob" onclick="togGroup(this, {a:'bob', b:'mary'});"><td>2</td></tr>

<tr class="bob" onclick="togGroup(this, {a:'bob', b:'mary'});"><td>3</td></tr>
</table>

</body>
</html>

**ARondelli** · 05-18-2011, 10:48 PM

Hi.
How can I apply the a:hover css attribute to the bob and or mary classes above? Sorry, I really tried but no luck. THANK YOU FOR YOUR HELP!!!

**jscheuer1** · 05-19-2011, 12:07 AM

You cannot. They aren't a tags. However, you can apply the :hover pseudo class to anything (won't work in IE 6, but works in all others), ex:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.bob {
color:red;
}
.mary {
background-color:pink;
}
.bob:hover {
background-color: pink;
color: black;
}
</style>
<script type="text/javascript">
function togGroup(el, classes){
for (var els=document.getElementsByTagName(el.tagName), i = els.length-1; i > -1; --i)
if (els[i]!==el&&els[i].className==classes.b)
els[i].className=classes.a;
el.className=el.className==classes.a? classes.b : classes.a;
}
</script>
</head>
<body>
<table>
<tr class="bob" onclick="togGroup(this, {a:'bob', b:'mary'});"><td>1</td></tr>

<tr class="bob" onclick="togGroup(this, {a:'bob', b:'mary'});"><td>2</td></tr>

<tr class="bob" onclick="togGroup(this, {a:'bob', b:'mary'});"><td>3</td></tr>
</table>

</body>
</html>

**camaleon** · 08-12-2012, 04:50 PM

Thanks jscheuer1 for the script.

but I realized that if I apply the script to several <TR> when I click a row moves which I clicked.

how I can do to make the rows already selected remain with that class until you click again?

**jscheuer1** · 08-12-2012, 05:42 PM

If I understand the question, get rid of the highlighted:

Code:

<script type="text/javascript">
function togGroup(el, classes){
for (var els=document.getElementsByTagName(el.tagName), i = els.length-1; i > -1; --i)
if (els[i]!==el&&els[i].className==classes.b)
els[i].className=classes.a;
el.className=el.className==classes.a? classes.b : classes.a;
}
</script>