Geek Answers Handbook

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

I am working on a requirement where I have to highlight a row or column on a checkbox selected as in the image below.

Now, how do I change the code so that the overlay cell is assigned a new color instead of green or yellow? As in this image below, Jackson should be highlighted in a different color - blue.

enter image description here

the 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>

+4
source share
5 answers

Given what the trclass will have highlight, and the class itself tdwill have selectedcc, you can achieve this with a single selector:

.highlight .selectedcc {
    background-color: red;
}

, jQuery, , . :

$(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>
Hide result
+5

...
...

, .

... ... .oo(...)

"" "". (, , , ... lol!)

FIDDLE

$(document).ready(function(){

    $("input[type='checkbox']").change(function() {
        var $currentTable = $(this).closest('table');
        var index = $(this).parent().index();


        if( $(this).hasClass("data") ){ // ---------------------------------------- DATA checkboxes
                                        // --------------------- Does nothing for now...
                                        // --------------------- You may add code here.
            return;                     // --------------------- But keep the return to prevent row toggle.
        }

        if( $(this).hasClass("all") ){  // ---------------------------------------- ALL checkbox
            $("input[type='checkbox']").each(function(){
                if( $(this).hasClass("thCheck") || $(this).hasClass("tdCheck") ){
                    $(this).click();
                }
            });
            $("input[type='checkbox']").hasClass("tdCheck").click();
        }      

        if( $(this).hasClass("thCheck") ){  // ------------------------------------- COLUMN

            $(this).closest('tr').siblings().each(function(){
                // GREEN!
                $(this).children("td").eq(index).toggleClass("selectedColumn");

                // RED!
                if( $(this).children().hasClass("selectedRow") ){
                    $(this).children("td").eq(index).toggleClass("crossing");
                }
            });

        }else{  // ----------------------------------------------------------------- ROW

            // If a row is already selected --> crossing!
            $(this).closest('tr').children("td").each(function () {
                if( $(this).hasClass("selectedColumn") ){
                    $(this).toggleClass("crossing");
                }
            });

            // YELLOW!  
            $(this).closest("tr").children().toggleClass("selectedRow");
            // Except the TD that has the checkbox
            $(this).closest("tr").children().eq(0).toggleClass("selectedRow");

            // RED!
            $(this).children("td").each(function(){
                if( $(this).hasClass("selectedColumn") ){
                    $(this).children("td").addClass("crossing");
                }else{
                    $(this).children("td").remove("crossing");
                }
            });
        }
    });
});
+1

jQuery .hasClass, , , highlight, selected. , , , . , selected: .hasClass, , highlight, , .

, , .

0

- , ,

function color overlappingCell(){
  //select all tds who has both classes
   $("#datatable td.selected.selectedcc").removeClass().addClass("overlapcssclass")
}
 $("input[type='checkbox']").change(function (e) {
                if ($(this).is(":checked")) {
                    $(this).closest('tr').addClass("highlight");
                } else {
                    $(this).closest('tr').removeClass("highlight");
                }

              overlappingCell();

            });
            $('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');

                });
               overlappingCell();
            });
0

:

  • after switching if cells already selected use aday new class

$(function () {
  // rows
  $('#dataTable tr:gt(0)').find(':checkbox').change(function (e) {
    var index = 1 + $('#dataTable tr:gt(0)').find(':checkbox').index(this);
    $('#dataTable tr:eq(' +index + ')').find('td').toggleClass('highlight');
    if (this.checked) {
      $('#dataTable tr:eq(' +index + ')').find('td.highlight.selectedcc').removeClass().addClass('overlappedcells');
    } else {
      $('#dataTable tr:eq(' +index + ')').find('td.overlappedcells').removeClass().addClass('selectedcc');
    }
  });
  // cols
  $('#dataTable tr:eq(0)').find(':checkbox').click(function () {
    var index = $('#dataTable tr:eq(0)').find(':checkbox').index(this);
    $('#dataTable tr').find('td:eq(' + index + ')').toggleClass('selectedcc');
    if (this.checked) {
      $('#dataTable tr').find('td:eq(' + index + ').highlight.selectedcc').removeClass().addClass('overlappedcells');
    } else {
      $('#dataTable tr').find('td:eq(' + index + ').overlappedcells').removeClass().addClass('highlight');
    }
  });
});
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 5px;
}

.highlight {
  background: yellow;
}

.selectedcc {
  background-color: greenyellow;
}

.overlappedcells {
  background-color: darkslategray;
}
<script src="https://code.jquery.com/jquery-1.12.1.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>
Run codeHide result
0
source

More articles:


All Articles