soumitra chatterjee soumitra chatterjee - 5 months ago 15
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.

enter image description here

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

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>

Comments