PDA

View Full Version : 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/dynamicindex11/highlighttable.htm

Jesdisciple
07-15-2006, 12:32 AM
I finally got it! I edited http://www.w3schools.com/js/tryit.asp?filename=tryjs_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

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


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



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



<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) ?!?



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

jpaulraj
08-10-2006, 07:26 PM
oops.. just checked in FireFox - works great.. Just one more question and im good to go ;)

There are many tables in my page and many links.. what should i do so that the script applies only to the link to a particular table ?!?

For example -



<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>
<!-- script should apply for the below table -->
<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>

<!-- script should NOT apply for the below table -->
<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>


Thanks

mburt
08-10-2006, 07:38 PM
<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.className=="click") {
obj.style.background="#ff0066"
obj.onblur=function() {
obj.style.background="#ffffff"
}
}
}
document.onclick=rowclick
</script>
</head>
<body>
<!-- script should apply for the below table -->
<table>
<tr><td><a href="#" className="click">test</a></td></tr>
<tr><td><a href="#" className="click">test</a></td></tr>
<tr><td><a href="#" className="click">test</a></td></tr>
<tr><td><a href="#" className="click">test</a></td></tr>
</table>

<!-- script should NOT apply for the below table -->
<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>

This should work

jpaulraj
08-10-2006, 07:58 PM
Its not working in both IE and FireFox !! Can you please check.

Also (earlier) when i clicked on the link the bgcolor changed, but when i click anywhere outside, the bgcolor returns to its normal state.. the bgcolor of a row should only change when we click on the next link.. till then the bgcolor should be there.. Please help on this too..

Thanks a lot for the help.

jpaulraj
08-10-2006, 08:02 PM
I tried replacing the className to ID and it worked. Please let me know how to retain the bgcolor when clicking outside the link. thanks.



<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.id=="test") {
obj.style.background="#ff0066"
obj.onblur=function() {
obj.style.background="#ffffff"
}
}
}
document.onclick=rowclick
</script>
</head>
<body>
<!-- script should apply for the below table -->
<table>
<tr><td><a href="#" id="test">test</a></td></tr>
<tr><td><a href="#" id="test">test</a></td></tr>
<tr><td><a href="#" id="test">test</a></td></tr>
<tr><td><a href="#" id="test">test</a></td></tr>
</table>

<!-- script should NOT apply for the below table -->
<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>

mburt
08-10-2006, 08:03 PM
I just tested it in FireFox, and it worked fine.

mwinter
08-10-2006, 08:05 PM
Would you care to clarify the situation properly, preferably by posting a link to the document that you want to modify. First you write about changing the background colour in response to a change in the selected radio button, then radio buttons seem to disappear entirely, and finally anchors enter the fray.

By the way, any 'solution' that involves browser detection shouldn't be considered on principle (browser detection is flawed conceptually, almost always unnecessary, adds a maintenance burden, and is unreliable).




I tried replacing the className to ID and it worked.

All id attributes within a given document must be unique; your document is now invalid.

Mike

jpaulraj
08-10-2006, 08:43 PM
Yes it works with the ClassName. Sorry about that.

Now all i need is to retain the bgcolor on the row. When you click outside the link, it goes off. It should go off only when you click on other links (with classname).



<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.className=="test") {
obj.style.background="#ff0066"
obj.onblur=function() {
obj.style.background="#ffffff"
}
}
}
document.onclick=rowclick
</script>
</head>
<body>
<table>
<tr><td><a href="#" class="test">test</a></td></tr>
<tr><td><a href="#" class="test">test</a></td></tr>
<tr><td><a href="#" class="test">test</a></td></tr>
<tr><td><a href="#" class="test">test</a></td></tr>
</table>
</body>
</html>

jpaulraj
08-11-2006, 04:30 PM
Guys, please help...

mburt
08-11-2006, 04:52 PM
That will require a different process.

jpaulraj
08-14-2006, 02:41 PM
Can you please send me a sample script.

Thanks