Log in

View Full Version : 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 (http://www.google.com/search?q=change+class+javascript)!
jscheuer1
05-01-2008, 02:52 PM
In about its simplest form:


<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:


<!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:


<!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:


<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>
camaleon
08-12-2012, 08:58 PM
jscheuer1,

I want the rows that I select remain selected until you click the row to deselect.
jscheuer1
08-12-2012, 11:51 PM
I think that does it. Did you try it out?