How to assign a different color to two overlapping color in a HTML table using html/jquery?

Question

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>

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

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>

How to assign a different color to two overlapping color in a HTML table using html/jquery?

Sign up