CODEWITHSUNDEEP
javascriptjquery
Max
Max

Reputation: 940

Highlighting values on an assigned column of html table

I'm having a problem with highlight values on HTML table. I need to highlight only the values on the assigned column instead of the whole table. Any help is appreciated! Thanks. https://jsfiddle.net/raphcLb0/

Here is the JS code I use:

$(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').removeClass("highlight").filter(function () {
            return $.inArray($(this).text(), checked) >= 0
        }).addClass("highlight")
        if ($(this).is(".selector"))
            $('.all').not(this).prop("checked", false)
    }

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

});

Upvotes: 0

Views: 120

Answers (1)

Jacques Marais
Jacques Marais

Reputation: 2756

The following should work:

// 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').removeClass("highlight").filter(function () {
        return $.inArray($(this).text(), checked) >= 0 &&
              $('#form' + ($(this).index() + 1)).find('[name="'+$(this).text()+'"]').is(":checked")
    }).addClass("highlight")
    if ($(this).is(".selector"))
        $('.all').not(this).prop("checked", false)

}


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



});

Example

What I did is correct the id's of the forms and add the following line:

$('#form' + ($(this).index() + 1)).find('[name="'+$(this).text()+'"]').is(":checked")

What this does is select the form with the id containing the index of the current td element relative to its tr parent. Then it finds the checkbox with the correct name value matching the td's text content in that form and checks if it's checked.

Upvotes: 1

Related Questions