Highlighting with several colors on the table

Question

I've asked for help about this work before, but I realized that I made a mistake. So here I have a working code to switch highlighting colors for the value selected on the table. I can change the color of highlighting with this code, but I can't highlight different values with different colors at the same time. here is a fiddle example: https://jsfiddle.net/vvhbvdyj/ and jquery code is below. I'd be glad if someone can help me with this. thanks.

// JavaScript Document
$(document).ready(function() {

  $('.selector').each(function() {
    $(this).on('click', check);
  });
  $('.all').each(function() {
    $(this).on('click', all);
  });

  function all(event) {

    if ($(this).is(':checked')) {
      $("input:checkbox:not(:checked)", $(this).parents('form')).not(this).prop("checked", "checked");
    } else {
      $("input:checkbox(:checked)", $(this).parents('form')).not(this).prop("checked", "");
    }

    //$('.selector').prop("checked", this.name === "SelectAll");

    check(event);
  }

  function check(event) {
    var checked = $(".selector:checked").map(function() {
      return this.name
    }).get()
    $('td').css('background', '#fff').filter(function() {
      return $.inArray($(this).text(), checked) >= 0
    }).css('background', $('#nextColor').val())
    if ($(this).is(".selector"))
      $('.all').not(this).prop("checked", false)

  }


  $("#Hidden").on("click", function() {
    $(".selector").toggle();
  });


});

Kirill Simonov · Accepted Answer

If I get you right, you want to highlight the selected values with the current color and not change the color of the previously selected values.

In this case you should pass the current color to che check function each time you click the checkbox. With a few modifications your code would look like this:

$(document).ready(function() {

    $('.selector').each(function() {
        $(this).on('click', function(e) {
            check($(this).prop("checked") ? $("#nextColor").val() : '#fff', $(this).attr("name"));
        }); 
    });
    $('.all').each(function() {
       $(this).on('click', all); 
    });

    function all(event) {
        if ($(this).is(':checked')) {  
            let checked = $("input:checkbox:not(:checked)", $(this).parents('form')).not(this);
            checked.prop("checked", true);
            check($("#nextColor").val(), ...checked.map((i, e) => e.name).get());
        } else {
            let checked = $("input:checkbox(:checked)", $(this).parents('form')).not(this);
            checked.prop("checked", false);
            check('#fff', ...checked.map((i, e) => e.name).get());
        }
    }

    function check(color, ...elements) {
        $('td').each((i, td) => {
            if (elements.includes($(td).text())) $(td).css('background', color);
        });
    }
 

});

@charset "utf-8";
/* CSS Document */
*
{
    margin: 3;
    padding: 3;
}

html, body, .Container
{
    height: 98%;
}

    .Container:before
    {
        content: '';
        height: 100%;
        float: left;
    }

.Header
{
    margin-bottom: 10px;
    background-color: #fff;
}
.Content
{
    position: relative;
    z-index: 1;
}
    .Content:after
    {
        content: '';
        clear: both;
        display: block;
    }

.Wrapper
{
	position: absolute;
	width: 500px;
	height: 100%;
}
    .Wrapper > div
    {
        height: 100%;
    }

.LeftContent
{
    background-color: white;
    overflow: auto;
	width: 600px;
}

.mainContent
{
    background-color: white;
    margin-left: 800px;
	 
}



.selector {
    display: none;
}


tr.border_bottom td {
  border-bottom:1pt solid black;
}


	table.tableizer-table {
	border: 1px solid #CCC; font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
    border-collapse:collapse; /* Keeps the table lines like in excel */
    table-layout:fixed;   /* Fits the table in the screen */
} 
.tableizer-table td {
	padding: 6px;
	margin: 6px;
	border: 2px solid #ccc;
}
.tableizer-table th {
	background-color: #FFFFFF; 
	color: #FFF;
	font-weight: bold;
}


 Parameters:
 
 
 

 
 
                             
                    All
                    5
                    7
                    9
                    10
                    19
                    23
                    35
                    37
                    40
                    43
                    44
                    46
                    51
                    52
                    54
                    55
                    60
                    61
                    62
                    70
                    74
                    75  
                    
                    
                    
                             
                    All
                    5
                    8
                    10
                    15
                    16
                    18
                    21
                    26
                    28
                    30
                    33
                    39
                    46
                    49
                    50
                    51
                    52
                    53
                    54
                    62
                    64
                    74  
                    
                    
         
         
                        
       
2 3 18 20 22 29 30 32 33 34 38 39 51 56 57 60 61 63 72 75 77 80

 2 3 6 9 12 14 15 17 18 19 20 21 22 26 28 30 42 48 55 61 75 77

Highlighting with several colors on the table

Answers (1)

Related Questions