我正在寻找一种方法来更改表格的行和列内容的字体颜色，并在表格的顶部和左侧分配复选框。因此，当单击复选框时，相应的行或列内容会更改字体颜色。我不需要多种颜色。我只需要将字体颜色更改为指定的颜色即可。可以同时单击多个行复选框和列复选框，这不会导致复杂化。感谢您的帮助!
这里还有一个 jsfiddle:https://jsfiddle.net/u6xzfnq7/
.tb {
font-size: 12px;
border: 1px solid #CCC;
font-family: Arial, Helvetica, sans-serif;
}
.tb td {
padding: 4px;
margin: 3px;
border: 1px solid #CCC;
}
<table class="tb">
<tbody>
<tr>
<td></td>
<td>
<label class="color-switch">
<input type="checkbox" id="check1" /> Switch</label>
</td>
<td>
<label class="color-switch">
<input type="checkbox" id="check2" /> Switch</label>
</td>
<td>
<label class="color-switch">
<input type="checkbox" id="check3" /> Switch</label>
</td>
<td>
<label class="color-switch">
<input type="checkbox" id="check4" /> Switch</label>
</td>
<td>
<label class="color-switch">
<input type="checkbox" id="check5" /> Switch</label>
</td>
<td>
<label class="color-switch">
<input type="checkbox" id="check6" /> Switch</label>
</td>
<td>
<label class="color-switch">
<input type="checkbox" id="check7" /> Switch</label>
</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox" id="check8" /> Switch</label>
</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox" id="check10" /> Switch</label>
</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox" id="check11" /> Switch</label>
</td>
<td>Number</td>
<td>Number</td>
<td>Text</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox" id="check12" /> Switch</label>
</td>
<td>Number</td>
<td>Number</td>
<td>Text</td>
<td>Text</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox" id="check13" /> Switch</label>
</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox" id="check14" /> Switch</label>
</td>
<td>Text</td>
<td>Number</td>
<td>Number</td>
<td>Text</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox" id="check15" /> Switch</label>
</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox" id="check16" /> Switch</label>
</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox" id="check17" /> Switch</label>
</td>
<td>Text</td>
<td>Number</td>
<td>Text</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox" id="check18" /> Switch</label>
</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox" id="check19" /> Switch</label>
</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox" id="check20" /> Switch</label>
</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox" id="check21" /> Switch</label>
</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox" id="check22" /> Switch</label>
</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox" id="check23" /> Switch</label>
</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
</tr>
</tbody>
</table>最佳答案
你可以这样做:
//Add listener on checbox inside the table with class .tb
$('.tb input[type="checkbox"]').change(function() {
//Remove all selected
$('.tb td').removeClass('selected');
//Add class on rows
//Select all checked checkbox on the first column
//Select the parent td and select its siblings
//Add Class
$('.tb tr>td:first-child').find('input[type="checkbox"]:checked').each(function() {
$(this).parent().parent().addClass('selected').siblings().addClass('selected');
})
//Add class on columns
//Select all checkboxes on the first row.
//Loop and check if checked.
//If checked, add class on the column
$('.tb tr:first-child').find('input[type="checkbox"]').each(function(i) {
if ($(this).is(":checked"))
$('.tb tr>td:nth-child(' + (i + 2) + ')').addClass('selected');
})
}).tb {
font-size: 12px;
border: 1px solid #CCC;
font-family: Arial, Helvetica, sans-serif;
}
.tb td {
padding: 4px;
margin: 3px;
border: 1px solid #CCC;
}
.selected {
color: red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tb">
<tbody>
<tr>
<td></td>
<td>
<label class="color-switch">
<input type="checkbox"/> Switch</label>
</td>
<td>
<label class="color-switch">
<input type="checkbox"/> Switch</label>
</td>
<td>
<label class="color-switch">
<input type="checkbox"/> Switch</label>
</td>
<td>
<label class="color-switch">
<input type="checkbox"/> Switch</label>
</td>
<td>
<label class="color-switch">
<input type="checkbox"/> Switch</label>
</td>
<td>
<label class="color-switch">
<input type="checkbox"/> Switch</label>
</td>
<td>
<label class="color-switch">
<input type="checkbox"/> Switch</label>
</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox"/> Switch</label>
</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox"/> Switch</label>
</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox"/> Switch</label>
</td>
<td>Number</td>
<td>Number</td>
<td>Text</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox"/> Switch</label>
</td>
<td>Number</td>
<td>Number</td>
<td>Text</td>
<td>Text</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox"/> Switch</label>
</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox"/> Switch</label>
</td>
<td>Text</td>
<td>Number</td>
<td>Number</td>
<td>Text</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox"/> Switch</label>
</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox"/> Switch</label>
</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox"/> Switch</label>
</td>
<td>Text</td>
<td>Number</td>
<td>Text</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox"/> Switch</label>
</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox"/> Switch</label>
</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox"/> Switch</label>
</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox"/> Switch</label>
</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox"/> Switch</label>
</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>
<label class="color-switch">
<input type="checkbox"/> Switch</label>
</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
<td>Number</td>
</tr>
</tbody>
</table>关于javascript - 使用复选框更改行和列的字体颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50077128/