更改表格單元格背景色基於複選框

Question

所以我有一個表，並在目前一些複選框：

https://jsfiddle.net/1o7phmkL/

我想這取決於檢查，以改變每一個「細胞」的背景顏色框被選中。例如，如果用戶選擇週一和週六複選框週一和週六細胞的表將獲得紅色的背景色，而只有那些有若干。

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

我看看通過網絡的一個例子如何這可以工作，但我只能找到使用JavaScript的例子，從而「最接近」的TD改變。

在此先感謝。

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

添加以下代碼JS和嘗試

$(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"); 
} 
}); 

見琴：

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

Answer 3

下面的代碼可以幫助你找到答案

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

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