...

View Full Version : Change text color in row when checkbox selected



drennan
07-21-2008, 04:33 PM
Hi. I'm quite new to using code so please bear with me. I've setup a form in a table and if a checkbox is ticked, the background color changes along the whole row. Trouble is, the text doesn't stand out after this color change so I also need the text color to change from black to white when checked and revert to black if unchecked. Anyone know how I would do this? Here's the code I'm using to change the background color. Can I modify it or do I need new code? Thanks :)

<script type="text/javascript">
function change(obj) {
var tr=obj.parentNode.parentNode;
if(obj.checked) {
tr.className+=' pink';
}
else {
tr.className=tr.className.replace(' pink', '');
}
clickCh();
}

------------------------------------

.nochange, tr {background-color:white;}
tr.pink {
background-color:#7247D1;
}
.light {background-color:#D2CAEB;}
.dark {background-color:#B1AAD7;}

------------------------------------

<tr class="light">
<td width="68" bgcolor="#000000" class="leftAlign" scope="row">&nbsp;</td>
<td width="20" bgcolor="7247d1" class="leftAlign" scope="row">&nbsp;</td>
<td width="21" class="leftAlign" scope="row">&nbsp;</td>
<td class="leftAlign" scope="row">&nbsp;&nbsp;<strong> ProductA</strong> (details)</td>
<td width="30" class="leftAlign" scope="row"><div align="center">20g</div></td>
<td><input name="input4" onClick="change(this)" value="0.80" type="checkbox"></td>
<td >&pound;0.15</td>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>

<td bgcolor="7247d1">&nbsp;</td>
<td bgcolor="#000000">&nbsp;</td>
</tr>

jcdevelopment
07-21-2008, 04:51 PM
<script type="text/javascript">
function change(obj) {
var tr=obj.parentNode.parentNode;
if(obj.checked) {
tr.className+=' pink';
document.getElementById('text').style.color='#fff';
}
else {
document.getElementById('text').style.color='#000';
tr.className=tr.className.replace(' pink', '');
}
clickCh();
}

html/CSS


.nochange, tr {background-color:white;}
tr.pink {
background-color:#7247D1;
}
.light {background-color:#D2CAEB;}
.dark {background-color:#B1AAD7;}
#text {
color:#fff;
}

<tr class="light">
<td width="68" bgcolor="#000000" class="leftAlign" scope="row">&nbsp;</td>
<td width="20" bgcolor="7247d1" class="leftAlign" scope="row">&nbsp;</td>
<td width="21" class="leftAlign" scope="row">&nbsp;</td>
<td class="leftAlign" scope="row">&nbsp;&nbsp;<strong> ProductA</strong> (details)</td>
<td width="30" class="leftAlign" scope="row"><div align="center">20g</div></td>
<td><input name="input4" onClick="change(this)" value="0.80" type="checkbox"></td>
<td ><div id="text">&pound;0.15</div></td>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>

<td bgcolor="7247d1">&nbsp;</td>
<td bgcolor="#000000">&nbsp;</td>
</tr>

try that.

drennan
07-21-2008, 05:16 PM
Thanks. Its almost there! Only the text in column 7 changes to white (the column after the checkbox). Its also white (not black) when the page loads, but it does toggle correctly after the box is checked/unchecked. So I just need to apply this change to all cells on the row and get the text to initially display as black. Thanks, Dren.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum