更改表格单元格背景色基于复选框
问题描述:
所以我有一个表,并在目前一些复选框:更改表格单元格背景色基于复选框
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改变。
在此先感谢。
答
试试这个:<script>var boxes = document.getElementsByTagName("input") for (var i = 0; i < boxes.length; i++) { if (boxes[i].checked) {boxes[i].style.backgroundColor = "red";}}</script>
答
添加以下代码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");
}
});
见琴:
答
下面的代码可以帮助你找到答案
$(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>
令人惊叹的,谢谢! –