|
Click to See Complete Forum and Search --> : [RESOLVED] Change row color when checkbox ticked drennan 07-15-2008, 07:35 AM Hi. I need to do this so the selected rows within a table are clearly highlighted. The table is 15 cells wide and the checkboxes are in column 4. columns 1 and 15 act as the table border. Is there a way to change the color of all cells in that row, apart from 1 and 15, then revert colors when unchecked? Thanks guys :) Fang 07-15-2008, 08:56 AM Give the cells that are not to be changed a class:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>toggle</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript"> function change(obj) { var tr=obj.parentNode.parentNode.parentNode; // this may change depending on the html used tr.style.backgroundColor=(obj.checked)? 'pink' : 'white'; } </script> <style type="text/css"> .nochange, tr {background-color:white;} </style> </head> <body> <table border="1" cellspacing="2" cellpadding="5" summary=""> <tr> <td class="nochange">foo</td> <td>bar</td> <td><label>select: <input type="checkbox" name="toggle" onclick="change(this);"></label></td> </tr> </table> </body> </html> drennan 07-15-2008, 09:59 AM thats excellent, thank you. I changed 'white' to #B1AAD7 to match my design but my row colors alternate. Is there a way of making rows 1,3,5,7 like this and 2,4,6,8 revert back to a different color when unchecked? Thanks again Fang 07-15-2008, 10:21 AM Add the class to the cells you don't want to change. drennan 07-15-2008, 11:02 AM I still want them to change but revert back to a different color than 1,3,5. This is a stripped back version of my form. http://members.lycos.co.uk/drennanuk/form_test.html The first line is working great and I can apply this to lines 3 & 5, but how do I get lines 2,4,6 to do the same with a different BG color? Appreciate your time. drennan 07-15-2008, 11:15 AM I just noticed that the lines i've applied this to stop adding up in the totals fields. How can I make A) work as B) does? Thanks A) <td><label><input type="checkbox" name="toggle" value="0.80" id="bread_brown7" onclick="change(this);"></label></td> B) <td bgcolor="#D2CAEB"><input name="bread_brown2" type="checkbox" onclick="clickCh()" value="0.80" id="bread_brown7"></td> Fang 07-15-2008, 11:21 AM <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>toggle</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript"> function change(obj) { var tr=obj.parentNode.parentNode.parentNode; // this may change depending on the html used if(obj.checked) {tr.className+=' pink';} else {tr.className=tr.className.replace(' pink', '');} } </script> <style type="text/css"> .nochange, tr {background-color:white;} tr.pink {background-color:pink;} /* Specificity is important */ .light {background-color:#ccccff} .dark {background-color:#cc99ff} </style> </head> <body> <table border="1" cellspacing="2" cellpadding="5" summary=""> <tr class="light"> <td class="nochange">foo</td> <td>bar</td> <td><label>select: <input type="checkbox" name="toggle" onclick="change(this);"></label></td> </tr> <tr class="dark"> <td class="nochange">foo</td> <td>bar</td> <td><label>select: <input type="checkbox" name="toggle" onclick="change(this);"></label></td> </tr> </table> </body> </html> drennan 07-15-2008, 11:49 AM Perfect. I'm almost there! Now I just need to get the lines totaling up properly. It works on all lines except the ones i've just changed. Can you see what's stopping it from working? Fang 07-15-2008, 01:05 PM The first row:<td><label><input name="toggle" onclick="change(this);" type="checkbox"></label></td> The rest:<td bgcolor="#d2caeb"><input name="bread_brown2" onclick="clickCh()" value="0.80" id="bread_brown7" type="checkbox"></td> drennan 07-15-2008, 02:59 PM Hmmm. The totals still dont work :( Fang 07-16-2008, 12:35 AM Document has been removed drennan 07-16-2008, 10:01 AM I made some quick changes yesterday then had to go out. The doc is at www.fluxcreative.co.uk/second.html. The totals now work on lines 2-6 and line 1 is changing color properly. I just need to get both things working on the same line! Thx Fang 07-16-2008, 10:59 AM Look through it, see all the changes<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <title>products</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript"> function change(obj) { var tr=obj.parentNode.parentNode; // this may change depending on the html used if(obj.checked) { tr.className+=' pink'; } else { tr.className=tr.className.replace(' pink', ''); } clickCh(); } function clickCh(){ var tr=document.getElementsByTagName('tbody')[0].getElementsByTagName('tr'); var total1=total2=total3=total4=total5=total6=total7=total8=0; for(var i=0; i<tr.length; i++) { if(tr[i].getElementsByTagName('input')[0].checked) { var td=tr[i].getElementsByTagName('td'); total1+=parseFloat(td[5].firstChild.data.replace(/^[^\w\d\s\.\,]*/,"")); total2+=parseInt(td[6].firstChild.data); total3+=parseInt(td[7].firstChild.data); total4+=parseInt(td[8].firstChild.data); total5+=parseInt(td[9].firstChild.data); total6+=parseInt(td[10].firstChild.data); total7+=parseInt(td[11].firstChild.data); total8+=parseInt(td[12].firstChild.data); } } document.getElementById('total1').value="\u00A3"+total1.toFixed(2); document.getElementById('total2').value=total2; document.getElementById('total3').value=total3+"g"; document.getElementById('total4').value=total4+"g"; document.getElementById('total5').value=total5+"g"; document.getElementById('total6').value=total6+"g"; document.getElementById('total7').value=total7+"g"; document.getElementById('total8').value=total8+"g"; } </script> <style type="text/css"> table { margin-left: auto; margin-right: auto; } .nochange, tr {background-color:white;} tr.pink {background-color:#FF00FF;} .light {background-color:#D2CAEB;} .dark {background-color:#B1AAD7;} tr.rowborder td { border-top:thin solid #000;} table { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; border-collapse: collapse; border-spacing: 0; border-top-color: #9000FF; border-right-color: #9000FF; border-bottom-color: #9000FF; border-left-color: #9000FF; } tbody td, tfoot input { text-align:center; font-style: normal; table-layout: auto; } .leftAlign { text-align:left; } .style2 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; width: 20px; height: 20px; margin: 0; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding: 0; } body { background-color: #000000; } .style4 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; width: 20px; height: 20px; margin: 0; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding: 0; font-weight: bold; } #apDiv1 { position:absolute; left:331px; top:171px; width:566px; height:6px; z-index:1; } </style> </head> <body> <form action="#"> <p> </p> <p> </p> <table width="612" border="0" cellpadding="0" cellspacing="0" bgcolor="#B4A7D4"> <thead> <tr style="background-color:#9000FF"> <th width="27" scope="row"> </th> <th height="20" colspan="3" style="border:1px solid #7C9171;" class="leftAlign" scope="row"> Product</th> <th width="29" style="border:1px solid #7C9171;">Add</th> <th width="55" style="border:1px solid #7C9171;">Price</th> <th width="55" style="border:1px solid #7C9171;">Energy</th> <th width="55" style="border:1px solid #7C9171;">Protein</th> <th width="55" style="border:1px solid #7C9171;">Carbs</th> <th width="55" style="border:1px solid #7C9171;">Of Sugs</th> <th width="55" style="border:1px solid #7C9171;">Fat</th> <th width="55" style="border:1px solid #7C9171;">Of Sats</th> <th width="55" style="border:1px solid #7C9171;">Fibre</th> <th width="25"> </th> </tr> </thead> <tbody> <tr class="dark"> <td width="27" bgcolor="#9000FF" class="leftAlign" scope="row"> </td> <td width="20" class="leftAlign" scope="row"> </td> <td width="226" class="leftAlign" scope="row"> </td> <td width="33" class="leftAlign" scope="row"><div align="center">1</div></td> <td><input name="bread_brown1" onclick="change(this);" type="checkbox"></td> <td>£0.60</td> <td>15 kcal</td> <td>54g</td> <td>10g</td> <td>20g</td> <td>30g</td> <td>40g</td> <td>50g</td> <td bgcolor="#9000FF"> </td> </tr> <tr class="light"> <td width="27" bgcolor="#9000FF" class="leftAlign" scope="row"> </td> <td width="20" class="leftAlign" scope="row"> </td> <td class="leftAlign" scope="row"> </td> <td width="33" class="leftAlign" scope="row"><div align="center">2</div></td> <td><input name="bread_brown2" onclick="change(this)" value="0.80" type="checkbox"></td> <td >£0.15</td> <td>15 kcal</td> <td>54g</td> <td>10g</td> <td>20g</td> <td>30g</td> <td>40g</td> <td>50g</td> <td bgcolor="#9000FF"> </td> </tr> <tr class="dark"> <td width="27" bgcolor="#9000FF" class="leftAlign" scope="row"> </td> <td width="20" class="leftAlign" scope="row"> </td> <td class="leftAlign" scope="row"> </td> <td width="33" class="leftAlign" scope="row"><div align="center">3</div></td> <td><input name="bread_brown3" onclick="change(this)" value="0.80" type="checkbox"></td> <td>£0.80</td> <td>15 kcal</td> <td>54g</td> <td>10g</td> <td>20g</td> <td>30g</td> <td>40g</td> <td>50g</td> <td bgcolor="#9000FF"> </td> </tr> <tr class="light"> <td width="27" bgcolor="#9000FF" scope="row"> </td> <td width="20" scope="row"> </td> <td class="leftAlign" scope="row"> </td> <td width="33" class="leftAlign" scope="row"><div align="center">4</div></td> <td><input name="bread_brown4" onclick="change(this)" value="0.80" type="checkbox"></td> <td>£0.70</td> <td>15 kcal</td> <td>54g</td> <td>10g</td> <td>20g</td> <td>30g</td> <td>40g</td> <td>50g</td> <td bgcolor="#9000FF"> </td> </tr> <tr class="dark"> <td bgcolor="#9000FF" class="leftAlign" scope="row"> </td> <td class="leftAlign" scope="row"> </td> <td class="leftAlign" scope="row"> </td> <td class="leftAlign" scope="row"><div align="center">5</div></td> <td><input name="bread_brown5" onclick="change(this)" value="0.80" type="checkbox"></td> <td>£0.25</td> <td>35 kcal</td> <td>63g</td> <td>10g</td> <td>20g</td> <td>30g</td> <td>40g</td> <td>50g</td> <td bgcolor="#9000FF"> </td> </tr> <tr class="light"> <td bgcolor="#9000FF" class="leftAlign" scope="row"> </td> <td class="leftAlign" scope="row"> </td> <td class="leftAlign" scope="row"> </td> <td class="leftAlign" scope="row"><div align="center">6</div></td> <td><input name="bread_brown6" onclick="change(this)" value="0.80" type="checkbox"></td> <td>£0.20</td> <td>35 kcal</td> <td>63g</td> <td>10g</td> <td>20g</td> <td>30g</td> <td>40g</td> <td>50g</td> <td bgcolor="#9000FF"> </td> </tr> <!-- more Item rows here --> </tbody> <tfoot> <tr style="background-color:#9000FF"> <td height="20"> </td> <td height="20" colspan="2"> </td> <td height="20" colspan="2"><div align="center"><strong>TOTALS</strong></div></td> <td><div align="center"> <input name="total1" type="text" id="total1" value="0.00" size="5"> </div></td> <td><div align="center"> <input name="total2" type="text" id="total2" value="0" size="5"> </div></td> <td><div align="center"> <input name="total3" type="text" id="total3" value="0" size="5"> </div></td> <td><div align="center"> <input name="total4" type="text" id="total4" value="0" size="5"> </div></td> <td><div align="center"> <input name="total5" type="text" id="total5" value="0" size="5"> </div></td> <td><input name="total6" type="text" disabled id="total6" value="0" size="5"></td> <td><div align="center"> <input name="total7" type="text" id="total7" value="0" size="5"> </div></td> <td><div align="center"> <input name="total8" type="text" id="total8" value="0" size="5"> </div></td> <td width="25" height="20"> </td> </tr> </table> <p> </p> <p> </p> </form> </body> </html> drennan 07-16-2008, 11:14 AM thats excellent. thank you so much for all your time and help :) webdeveloper.com
Copyright Internet.com Inc., All Rights Reserved. |
|