jeudi 30 juin 2016

Color switching button with jquery

I have this example code to highlight specific cells of a table. Is there a way to switch colors or use multiple colors at the same time?

I am trying to make a button to switch the color of hightlighting. By default when a value is selected, it is highlighted in green color. I would like to have a button so that when I click, my next selection will be a different color. So every time I click this button, the next selection will be a different color. is there a simple way to achieve this?

Here is the fiddle https://jsfiddle.net/g28xasd7/ and my code:

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

Or is there another way to change the color?

Aucun commentaire:

Enregistrer un commentaire