Change Table Cell background colour based on checkbox

Question

So i have a table and some check boxes at the moment:

https://jsfiddle.net/1o7phmkL/

I am trying to change the background color of each "cell" depending on what check boxes are selected. For example if the user is to select the Monday and Saturday check box the monday and saturday cells in the table will get a background colour of red, and only the ones that have a number in.

<form action="" method="get">
  <input type="checkbox" name="Monday" value="Monday">Monday<br>
  <input type="checkbox" name="Tuesday" value="Tuesday">Tuesday<br>
  <input type="checkbox" name="Wednesday" value="Wednesday">Wednesday<br>
  <input type="checkbox" name="Thursday" value="Thursday">Thursday<br>
  <input type="checkbox" name="Friday" value="Friday">Friday<br>
  <input type="checkbox" name="Saturday" value="Saturday">Saturday<br>
  <input type="checkbox" name="Sunday" value="Sunday">Sunday<br>
</form>

I have look across the web for an example of how this can work but i can only find example using javascript whereby the "closest" td is changed.

Thanks in advance.

Answer 1

尝试以下操作： <script>var boxes = document.getElementsByTagName("input") for (var i = 0; i < boxes.length; i++) { if (boxes[i].checked) {boxes[i].style.backgroundColor = "red";}}</script>

Answer 2

add following code to js and try

$(document).on("click",':checkbox',function(){
var val= $(this).val();
val=val.substring(0, 3);
if(this.checked){
selected_Index = $('th:contains("'+val+'")').index()+1;
//console.log(ownerIndex);
$('table tr td:nth-child('+selected_Index+')').css("background","#36ac3b");
}
else
{
$('table tr td:nth-child('+selected_Index+')').css("background","initial");
}
});

See fiddle:

https://jsfiddle.net/1o7phmkL/1/

Answer 3

Below code may help you to find your answer

 $(document).ready(function(e) { $('input[type=checkbox]').change(function() { var columnNo = $(this).val(); if ($(this).is(':checked')) { $('table tr td:nth-child('+columnNo+')').each(function(index, element) { if($(this).html()!= ' ') $(this).css("background-color","#F00"); }); } else { $('table tr td:nth-child('+columnNo+')').each(function(index, element) { if($(this).html()!= ' ') $(this).css("background-color","#FFF"); }); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <form action="" method="get"> <input id="1" type="checkbox" name="Monday" value="2">Monday<br> <input id="2" type="checkbox" name="Tuesday" value="3">Tuesday<br> <input id="3" type="checkbox" name="Wednesday" value="4">Wednesday<br> <input id="4" type="checkbox" name="Thursday" value="5">Thursday<br> <input id="5" type="checkbox" name="Friday" value="6">Friday<br> <input id="6" type="checkbox" name="Saturday" value="7">Saturday<br> <input id="0" type="checkbox" name="Sunday" value="1">Sunday<br> </form> <table border=1 cellpadding=2 class="calander" > <tr> <th>Sun <th>Mon <th>Tue <th>Wed <th>Thu <th>Fri <th>Sat </tr> <tr> <td> <td> <td> <td> <td>1 <td>2 <td>3 </tr> <tr> <td>4 <td>5 <td>6 <td>7 <td>8 <td>9 <td>10 </tr> <tr> <td>11 <td>12 <td>13 <td>14 <td>15 <td>16 <td>17 </tr> <tr> <td>18 <td>19 <td>20 <td>21 <td>22 <td>23 <td>24 </tr> <tr> <td>25 <td>26 <td>27 <td>28 <td>29 <td>30 <td> </tr> </table>