Change text color in row when checkbox selected

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>

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

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.