CSS Question
How to assign a different color to two overlapping color in a HTML table using html/jquery?
I am working on requirement where i have to highlight a row or column on checkbox selected as in the image below.
Now how to modify the code so that the overlapping cell is assigned a new color instead of green or yellow?
Like in this below image "Jackson" should be highlighted with a different color -say blue.
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>
Answer Source
Given that the tr would have the class of highlight and the td itself would have a class of selectedcc you can achieve this with a single selector:
.highlight .selectedcc {
background-color: red;
}
Also note that you can fix several logic errors in your jQuery code by joining the two event handlers you have now in to one. Try this:
$(document).ready(function() {
$("input[type='checkbox']").change(function(e) {
var $checkbox = $(this);
if ($checkbox.parent().is('td')) {
$checkbox.closest('tr').toggleClass("highlight", this.checked);
} else {
var index = $(this).parent('th').index();
$(this).closest('table').find('tr').each(function() {
$(this).find('td').eq(index).toggleClass('selectedcc', $checkbox.prop('checked'));
});
}
});
});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;
}
.highlight .selectedcc {
background-color: red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>