I have a task to highlight a row or column when a checkbox is selected, similar to the example shown in the image below.
How can I adjust the code so that the overlapping cell gets a different color instead of green or yellow? For instance, in the image below, "Jackson" should be highlighted with a different color - let's say blue.
https://i.sstatic.net/HDm41.png
Code:
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
$(document).ready(function () {
$("input[type='checkbox']").change(function (e) {
if ($(this).is(":checked")) {
$(this).closest('tr').addClass("highlight");
} else {
$(this).closest('tr').removeClass("highlight");
}
});
$('th').click(function () {
// $(this).addClass('selectedcc');
var $currentTable = $(this).closest('table');
var index = $(this).index();
// $currentTable.find('td').removeClass('selectedcc');
$currentTable.find('tr').each(function () {
$(this).find('td').eq(index).toggleClass('selectedcc');
});
});
});
</script>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
.highlight td {background: yellow;}
.selected {
background-color: yellow;
}
.selectedcc {
background-color: greenyellow;
}
</style>
</head>
<body>
<table style="width:60%" id="dataTable">
<tr>
<th><input type="checkbox" name="vehicle" value="Bike">All</th>
<th><input type="checkbox" name="vehicle" value="Bike">Firstname</th>
<th><input type="checkbox" name="vehicle" value="Bike">Lastname</th>
<th><input type="checkbox" name="vehicle" value="Bike">Points</th>
</tr>
<tr>
<td><input type="checkbox" name="vehicle" value="Bike"></td>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td><input type="checkbox" name="vehicle" value="Bike"></td>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td><input type="checkbox" name="vehicle" value="Bike"></td>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>