Change background color of cell on radio button click

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
ingineu
Forum Newbie
Posts: 2
Joined: Mon Aug 06, 2007 10:26 pm

Change background color of cell on radio button click

Post by ingineu »

feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]


I am new to PHP and was wondering how I can change the background color of a table cell.  When a radio button is clicked, I want the cell next to the cell that contains the radio button to change the background color.
I tried assigning id's to the 'td' lines but that didn't seem to work.  Help would be appreciated

Code: Select all

function occlude(object_id) {
// below are some of my attempts 
??? document.getElementById(xxx).style.backgroundcolor = "yellow"; 
??? document.getElementById(xxx).setAttribute('className','bgYellow');
}


echo "<tr>";
echo "<td width='22px' align='center'>";
echo "<input type='radio' name='btnradio:$taskid' onclick=\"[color=red]javascript:occlude('rec:$taskid')[/color]\" value='0'></td>";

if ($row["RecordExists"] == "0") {
			echo "<td class='bgRed' width='22px'>";
			echo "<input type='radio' name='btnradio:$taskid' onclick=\"javascript:reveal('rec:$taskid')\" value='1'></td>\n";}
		else { 	echo "<td class='bgYellow' width='22px'>";
			echo "<input type='radio' name='btnradio:$taskid' onclick=\"javascript:reveal('rec:$taskid')\" value='1' CHECKED></td>\n";}

feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]
User avatar
iknownothing
Forum Contributor
Posts: 337
Joined: Sun Dec 17, 2006 11:53 pm
Location: Sunshine Coast, Australia

Post by iknownothing »

this is a Javascript question, not PHP.

Code: Select all

.oldBack { background-color: #FFFFFF; }
.newBack { background-color: #FF0000; }

Code: Select all

function backgroundchange(){
var thebackgroundelement = document.getElementById('thebackgroundelement');
thebackgroundelement.className = 'newBack';
}

Code: Select all

<td id="thebackgroundelement" class="oldBack"></td>
<input type="radio" name="radioback" value="1" onclick="backgroundchange();">
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Post by pickle »

Untested:

Code: Select all

function highlightParent(object)
{
   if(object.checked)
    object.parentNode.className = 'highlight';
   else
    object.parentNode.className = '';
}

Code: Select all

<td>
  <input type = "radio" onclick = "highlightParent(this);">
</td>
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
ingineu
Forum Newbie
Posts: 2
Joined: Mon Aug 06, 2007 10:26 pm

Post by ingineu »

Thanks for your replies. Double quotes in javascript, for classname, were causing my code not to work. When changed to single quotes it worked. Thanks for pointing me in the right direction.
Post Reply