www.webdeveloper.com
Results 1 to 15 of 15

Thread: [RESOLVED] Change row color when checkbox ticked

  1. #1
    Join Date
    Jun 2008
    Location
    London
    Posts
    175

    resolved [RESOLVED] Change row color when checkbox ticked

    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

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Give the cells that are not to be changed a class:
    Code:
    <!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>

  3. #3
    Join Date
    Jun 2008
    Location
    London
    Posts
    175
    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

  4. #4
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Add the class to the cells you don't want to change.

  5. #5
    Join Date
    Jun 2008
    Location
    London
    Posts
    175
    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.

  6. #6
    Join Date
    Jun 2008
    Location
    London
    Posts
    175
    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>

  7. #7
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
    <!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>

  8. #8
    Join Date
    Jun 2008
    Location
    London
    Posts
    175
    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?

  9. #9
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    The first row:
    Code:
    <td><label><input name="toggle" onclick="change(this);" type="checkbox"></label></td>
    The rest:
    Code:
    <td bgcolor="#d2caeb"><input name="bread_brown2" onclick="clickCh()" value="0.80" id="bread_brown7" type="checkbox"></td>

  10. #10
    Join Date
    Jun 2008
    Location
    London
    Posts
    175
    Hmmm. The totals still dont work

  11. #11
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Document has been removed

  12. #12
    Join Date
    Jun 2008
    Location
    London
    Posts
    175
    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

  13. #13
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Look through it, see all the changes
    Code:
    <!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>&nbsp;</p>
    
      <p>&nbsp;</p>
      <table width="612" border="0" cellpadding="0" cellspacing="0" bgcolor="#B4A7D4">
    <thead>
        <tr style="background-color:#9000FF">
        <th width="27" scope="row">&nbsp;</th>
          <th height="20" colspan="3" style="border:1px solid #7C9171;" class="leftAlign" scope="row">&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;  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">&nbsp;</th>
        </tr>
    </thead>
    <tbody>
         <tr class="dark">
          <td width="27" bgcolor="#9000FF" class="leftAlign" scope="row">&nbsp;</td>
          <td width="20" class="leftAlign" scope="row">&nbsp;</td>
          <td width="226" class="leftAlign" scope="row">&nbsp;</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>&pound;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">&nbsp;</td>
        </tr>
        <tr class="light">
          <td width="27" bgcolor="#9000FF" class="leftAlign" scope="row">&nbsp;</td>
          <td width="20" class="leftAlign" scope="row">&nbsp;</td>
          <td class="leftAlign" scope="row">&nbsp;</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 >&pound;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">&nbsp;</td>
        </tr>
        <tr class="dark">
          <td width="27" bgcolor="#9000FF" class="leftAlign" scope="row">&nbsp;</td>
          <td width="20" class="leftAlign" scope="row">&nbsp;</td>
          <td class="leftAlign" scope="row">&nbsp;</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>&pound;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">&nbsp;</td>
        </tr>
        <tr class="light">
          <td width="27" bgcolor="#9000FF" scope="row">&nbsp;</td>
          <td width="20" scope="row">&nbsp;</td>
          <td class="leftAlign" scope="row">&nbsp;</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>&pound;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">&nbsp;</td>
        </tr>
        <tr class="dark">
    
          <td bgcolor="#9000FF" class="leftAlign" scope="row">&nbsp;</td>
          <td class="leftAlign" scope="row">&nbsp;</td>
          <td class="leftAlign" scope="row">&nbsp;</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>&pound;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">&nbsp;</td>
        </tr>
        <tr class="light">
          <td bgcolor="#9000FF" class="leftAlign" scope="row">&nbsp;</td>
          <td class="leftAlign" scope="row">&nbsp;</td>
          <td class="leftAlign" scope="row">&nbsp;</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>&pound;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">&nbsp;</td>
        </tr>
        
    <!-- more Item rows here -->
    </tbody>
    <tfoot>
        <tr style="background-color:#9000FF">
          <td height="20">&nbsp;</td>
    
          <td height="20" colspan="2">&nbsp;</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">&nbsp;</td>
        </tr>
    
    </table>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    </form>
    </body>
    </html>

  14. #14
    Join Date
    Jun 2008
    Location
    London
    Posts
    175
    thats excellent. thank you so much for all your time and help

  15. #15
    Join Date
    Nov 2012
    Posts
    1

    I Need just a little Variation of this.

    This thread was VERY useful to me. and I Thank you very much.

    However, I just need a little Variation to this solution.

    VARIATION1:
    I want to use a Radio button, so that only ONE option/ tr can be selected at a time. once another option is selected, the previously colored row should change to normal(white)

    VARIATION2:
    Instead of checkbox, i want to use a dropdown menu on each row.
    each dropdown will have 2 options only. (e.g. Present / Absent)
    Whenever Absent is chosen in any row, the color of that row changes to red,
    and when Present is chosen, the color of that row changes to normal(maybe white) but not blank.

    (Imagine that each row represent a student whose attendance we want to mark as present or absent, and there are n number of students)

    I don't know if I should put this as a seperate NEW POST but i really need the help specifically from you, since you've already developed it to this level.
    moreover, i have searched everywhere for this... just cant find a simple solution.

    Please Help, I really Appreciate.
    Thank You.

    HERE's THE CODE I TRIED TO MODIFY TO VARIATION1 but didnt work as described
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <title>Good With Checkbox</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:red;} /* Specificity is important */
    .light {background-color:white}
    .dark {background-color:white}
    </style>
    
    </head>
    <body>
    <table border="1" cellspacing="2" cellpadding="5" summary="" width="369">
    <tr class="light"><label>
    <td width="25"><input type="radio" name="toggle" onclick="change(this);"></td>
    <td width="136">foo</td>
    <td>bar</td></label>
    </tr>
    <tr class="dark"><label>
    <td width="25"><input type="radio" name="toggle" onclick="change(this);"></td>
    <td width="136">foo</td>
    <td>bar</td></label>
    </tr>
    </table>
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 3 users browsing this thread. (0 members and 3 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles