How to change background color of row onclick?

**jpaulraj** · 07-14-2006, 09:03 PM

I have a multi column table with radio buttons in column 1, when i select this radio button, the entire row should change the color from white to orange. How to do this? Pls help...

The script given here uses moveover, i want it when i select the radio button....

http://www.dynamicdrive.com/dynamici...lighttable.htm

**Jesdisciple** · 07-15-2006, 12:32 AM

I finally got it! I edited http://www.w3schools.com/js/tryit.as...yjs_form_radio to fit your purposes. There is a drop-down menu version for body background color at http://www.w3schools.com/myfirst/js07.asp

Code:

<head>
<script type="text/javascript">
function check(x)
{
document.getElementById("glow").bgColor=x
}
</script>
</head>
<body>
<p>What's your favorite browser:</p>
<form>
<input type="radio" name="name" onclick="check(this.value)" value="blue">Blue<br />
<input type="radio" name="name" onclick="check(this.value)" value="red">Red<br />
<input type="radio" name="name" onclick="check(this.value)" value="yellow">Yellow<br />
<input type="radio" name="name" onclick="check(this.value)" value="white">White<br />
<br />
<table><tr id=glow>
<td>slfhsljdf</td>
<td>jfhskjfhd</td>
</tr><tr>
<td>ajlsfhjksd</td>
<td>sjdfhsdf</td>
</tr></table>
</form>
</body>

Table row "glow" is highlighted whatever color you select.

**jpaulraj** · 07-15-2006, 02:39 PM

Thanks a lot my friend.

**jpaulraj** · 07-15-2006, 02:42 PM

Just one thing, this is my scenario, i have radio buttons in the first column, there are many rows with radio buttons in the first column, if you select a radio button the entire row (where the radio button is) should change its background.. if you select another radio button, this row should return to its original bg and the other row should be highlighted.. sorry for not mentioning this before...

Thanks

**mburt** · 07-23-2006, 01:55 AM

I'm not positive about what you're trying to say, but I think this may help:

<html>
<head>
<script language="javascript">
function color(newC,oldC,button) {
newC.bgColor = "silver"
oldC.bgColor = "white"
}
</script>
</head>
<body onload="color(c1,c2,name)">
<table>
<tr>
<td width="100">
<input type="radio" checked name="name" onclick="color(c1,c2,this)">Test 1<br />
</td>
<td id="c1" width="100">Test Col 1</td>
</tr>
<tr>
<td width="100">
<input type="radio" name="name" onclick="color(c2,c1,this)">Test 2<br />
<td id="c2" width="100">Test Col 2</td>
</td>
</tr>
</table>
</body>
</html>

**jpaulraj** · 08-10-2006, 06:41 PM

I need this script to work when you click on a link. Clicking on a link in row 1should highlight (change bg color) for the entire row. Cliking on a link from the second row should set the bg color of row 1 to default and change the bg color of row 2.

Please Help.

Thanks.

**mburt** · 08-10-2006, 06:53 PM

Hmm..

This is the best I can do:

Code:

<html>
<head>
<script type="text/javascript">
var ie = document.all
var ns = document.getElementById && !ie
function rowclick(e) {
var obj = ns ? e.target : event.srcElement
if (obj.tagName=="TD") {
obj.style.background="red"
	obj.onblur=function() {
		obj.style.background="white"
	}
}
}
document.onclick=rowclick
</script>
</head>
<body>
<table>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
</table>
</body>
</html>

**jpaulraj** · 08-10-2006, 06:54 PM

I used this script to change BG color of a row.. How do i reset the bgcolor of the previous row when i click the next row?

Code:

<html>
<head>
<title>Test BG Change</title>
<style>
.td1 { background-color: #990000;color : #ffffff; }
.td2 { background-color: #ffffcc;color : #336699; }
</style>

<script language=javascript> 
function callme(rno)
{
var tmp = document.getElementById(rno); 
tmp.className='td2'
}
</script>
</head>

<body>
<table width=200 border=1>
<tr id="t1" class=td1 onClick=javascript:callme('t1')><td><a href="#">some text</a></td><tr>
<tr id="t2" class=td1 onClick=javascript:callme('t2')><td><a href="#">some text</a></td><tr>
<tr id="t3" class=td1 onClick=javascript:callme('t3')><td><a href="#">some text</a></td><tr>
<tr id="t4" class=td1 onClick=javascript:callme('t4')><td><a href="#">some text</a></td><tr>
</table>
</body>
</html>

**jpaulraj** · 08-10-2006, 07:07 PM

Thanks for the script mburt.. this works for IE but not on FireFox.. however in IE, when i add a "a href" tag, it doesnt work.. see the script below.

Code:

<html>
<head>
<script type="text/javascript">
var ie = document.all
var ns = document.getElementById && !ie
function rowclick(e) {
var obj = ns ? e.target : event.srcElement
if (obj.tagName=="TD") {
obj.style.background="#e6e6e6"
	obj.onblur=function() {
		obj.style.background="#ff0066"
	}
}
}
document.onclick=rowclick
</script>
</head>
<body>
<table>
<tr><td><a href="#">test</a></td></tr> <!--doesnt work since i have a <a href> tag -->
<tr><td><a href="#">test</a></td></tr> <!--doesnt work since i have a <a href> tag -->
<tr><td><a href="#">test</a></td></tr> <!--doesnt work since i have a <a href> tag -->
<tr><td>test</td></tr>
</table>
</body>
</html>

**jpaulraj** · 08-10-2006, 07:21 PM

This works perfect in IE - thanks to mburt. Now please tell me what should i do to make it work for other browsers (FireFox) ?!?

Code:

<html>
<head>
<script type="text/javascript">
var ie = document.all
var ns = document.getElementById && !ie
function rowclick(e) {
var obj = ns ? e.target : event.srcElement
if (obj.tagName=="A") {
obj.style.background="#ff0066"
	obj.onblur=function() {
		obj.style.background="#ffffff"
	}
}
}
document.onclick=rowclick
</script>
</head>
<body>
<table>
<tr><td><a href="#">test</a></td></tr>
<tr><td><a href="#">test</a></td></tr>
<tr><td><a href="#">test</a></td></tr> 
<tr><td><a href="#">test</a></td></tr>
</table>
</body>
</html>

Thread: How to change background color of row onclick?

Thread Tools

Search Thread

How to change background color of row onclick?

Bookmarks

Bookmarks

Posting Permissions