(Code Supplied) Change color of table row OnClick, then change back when another button is clicked

by: cem_turkPosted on 2009-08-11 at 03:50:36ID: 25067601

nearly same thing if you have no form to be posted

<script type="text/javascript">
function change(obj) {
var tr=obj.parentNode.parentNode;
tr.style.backgroundColor=(obj.checked)? 'pink' : 'white';
}
</script>
 
<style type="text/css">
body {background-color:#9cf;}
tr {background-color:white;} 
</style>
 
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" summary="">
<tr><td><input type="submit" onclick="change(this);"></td></tr>
<tr><td><input type="submit" onclick="change(this);"></td></tr>
<tr><td><input type="submit" onclick="change(this);"></td></tr>
</table>

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:

Select all Open in new window

by: DreamwarePosted on 2009-08-11 at 03:52:46ID: 25067609

Your code is ok, but you have 1 too many parentNodes...

var tr=obj.parentNode.parentNode;
// should be, if you are referencing a td...
var tr=obj.parentNode;

1:
2:
3:

Select all Open in new window

by: carrzkissPosted on 2009-08-11 at 03:53:27ID: 25067614

there is a <form> involved
And I had already tried it the way you have it here, and did not work.

by: cem_turkPosted on 2009-08-11 at 03:59:28ID: 25067642

you can use type="button" instead of submit if you dont want your form to be submitted immediately

by: DreamwarePosted on 2009-08-11 at 03:59:29ID: 25067643

I'm sorry - I misread the code. Your code looks right, but I'm going to assume it's not working as desired. You could try:

1) forming the submits property, or
2) wrapping the whole mess in a form

//forming the submits property, or
<input type="submit" onclick="change(this);" />

1:
2:

Select all Open in new window

by: DreamwarePosted on 2009-08-11 at 04:00:40ID: 25067652

is there a valid DOCTYPE in play?

by: carrzkissPosted on 2009-08-11 at 13:29:48ID: 25073047

The function is looking at a Checked
>>> tr.style.backgroundColor=(obj.checked)? 'pink' : 'white';

Which means that it is a checkbox.
What needs to be changed on the code obj.checked
to do a button instead? something like obj.onclick (Which is not correct)

by: carrzkissPosted on 2009-08-11 at 16:47:49ID: 25074618

Just playing around with it, to see if I can make it do something.

Still need the button, so that when another button is clicked, it will go back to its original color
(The <td> returns to its original color)

<html lang="en">
<head>
<title>Basic HTML</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
<script type="text/javascript">
function change(obj) {
var tr=obj.parentNode.parentNode;
tr.style.backgroundColor=(obj.checked)? 'pink' : 'white';
}
</script>
 
<script type="text/javascript">
function change(obj) {
var td=obj.parentNode.parentNode;
td.style.backgroundColor=(obj.checked)? '#CBD6FA' : '#9cf';
}
</script>
<style type="text/css">
#InboxButton {background-color:#CBD6FA;} 
 
body {background-color:#9cf;}
tr {background-color:white;}
</style>
 
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" summary="" width="200px">
<tr><td><input type="checkbox" onclick="change(this);"></td></tr>
<tr><td><input type="checkbox" onclick="change(this);"></td></tr>
<tr><td><input type="checkbox" onclick="change(this);"></td></tr>
</table>
 
<table border="0" cellpadding="0" cellspacing="0" summary="" width="200px">
<tr><td><input id="InboxButton" type="submit" onclick="change(this);"></td></tr>
<tr><td><input id="InboxButton" type="submit" onclick="change(this);"></td></tr>
<tr><td><input id="InboxButton" type="submit" onclick="change(this);"></td></tr>
</table>
</body>
</html>

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:

Select all Open in new window

by: cem_turkPosted on 2009-08-11 at 23:01:59ID: 25076042

your change function works for checkboxes only, i changed it so that it works according to color name.

<script type="text/javascript">
function change(obj) {
var tr=obj.parentNode.parentNode;
if (tr.style.backgroundColor=='pink') {
tr.style.backgroundColor='white';
else {
tr.style.backgroundColor='pink';
}  
}
</script>

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:

Select all Open in new window

by: carrzkissPosted on 2009-08-11 at 23:32:32ID: 25076149

cem_turk:
Can you add in some form fields to make this work (A demo of it please)?

I am getting a "Syntax Error" on line 6
>> else {

Thanks.

by: cem_turkPosted on 2009-08-11 at 23:37:33ID: 25076171

sorry, i am at work, so i don't have enough time to put a through test for any code. i forgot to close a bracet there here is the corrected version.

<script type="text/javascript">
function change(obj) {
var tr=obj.parentNode.parentNode;
if (tr.style.backgroundColor=='pink') {
tr.style.backgroundColor='white';
}
else {
tr.style.backgroundColor='pink';
}  
}
</script>

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:

Select all Open in new window

by: carrzkissPosted on 2009-08-12 at 00:27:18ID: 25076352

thanks.
But sorry, that is not what I had in mind.

I need it so that when you click on a button, it will highlight (Like you have provided)
And then when you click on another button, it Highlights the new button and returns the other
Button to its original state (Color)

Hope that makes since.
Have a good day at work.

Carrzkiss

by: DreamwarePosted on 2009-08-12 at 02:48:21ID: 25077084

This will store an active state on the button that calls the function. You can attach this to the onclick event of the button...

function change(obj) {
var tr=obj.parentNode.parentNode;
obj.active = !obj.active;
if (obj.active) {
tr.style.backgroundColor='white';
}
else {
tr.style.backgroundColor='pink';
}
}

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:

Select all Open in new window

by: carrzkissPosted on 2009-08-12 at 12:25:16ID: 25081936

still no go.
The previous button's color still remains changed, even after you have clicked on
Other buttons.

I guess this is going to be a lossing battle here?

by: carrzkissPosted on 2009-08-20 at 18:55:19ID: 25148561

Found code that does exacly what I was needing.
Thanks all for your help.

Code provided below.
Works like a charm

Carrzkiss

<script type="text/javascript">
var whosChanged = null;
function changeMe(el)
{
el.style.backgroundColor = "#FE3000";
el.style.color = "#000000";
if (whosChanged != null)
{
whosChanged.style.backgroundColor = ""
whosChanged.style.color = ""
}
whosChanged = el;
}
</script>
<table border="0" cellspacing="0" cellpadding="0" >
<tr>
<td width="6" height="18"></td>
<td class="tablecells" id="nav1" onclick="changeMe(this);"><a href="#" id="nav1">1</a></td>
 
<td width="1" height="18"></td>
<td class="tablecells" id="nav2" onclick="changeMe(this);"><a href="#" id="nav2">2</a></td>
 
<td width="1" height="18"></td>
<td class="tablecells" id="nav3" onclick="changeMe(this);"><a href="" id="nav3">3</a></td>
 
<td width="1" height="18"></td>
</tr>
</table>

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:

Select all Open in new window

Question

(Code Supplied) Change color of table row OnClick, then change back when another button is clicked

Subscribe now for full access to Experts Exchange and get

Instant Access to this Solution

JavaScript

Cascading Style Sheets (CSS)

Trusted by hundreds of thousands everyday for fast, accurate and reliable tech support.

See what Experts Exchange can do for you.

Got a question?

We've got the answer.

Need individual assistance?

Our experts are ready to help.

Want to learn from the best?

Read articles from industry experts.

Working on a long term project?

Store your work and research.

What Makes Experts Exchange Unique?

Trusted by the world's most respected brands.

Faithfully serving IT professionals since 1996.

Related Solutions

Free Tech Articles

Cloud Class Webinars

Join the Community

Give a Little. Get a Lot.

Answers

3 Ways to Join

The Experts

The Experts

Testimonials

Testimonials

Testimonials

Business Clients

Business Clients

In the Press

In the Press

In the Press