vendredi 3 novembre 2017

Change table row color depending on multiple selections/hide elements

I have a table. On each row I have a checkbox to "select it", two select boxes and an extra checkbox.

When I show my page, each row background color is the default one (white).

What I need is two things:

  1. For each "Action" select box value, I want the row to change its color but only if the row checkbox is checked.

  2. If the "Action" select box value is equal to some specific value, I want the second select box and the extra checkbox to be disabled.

At the moment, I have the following code that changes the row background color depending only on the first select box choice, not taking into account the state of the checkbox.

How can I implement this? I don't know how to make these conditions work together.

Thanks.

enter image description here

(function($) {

    /**
     * The Drupal behaviors to copy address from shipping to billing on admin order edit page.
     */
    Drupal.behaviors.mymoduleColorRows = {
        attach: function(context) {

            // Bind change event to select
            $('.update-action').change(function(){
                setColors();
            });

            $('.edit-containers-table-groove-vt-1').change(function(){
                setColors2();
            });

            // Call function on first page load
            setColors();

            function setColors() {
                // Loop rows
                $('.containers_table tr').each(function(){
                    // Get color from value of select
                    var color = $(this).find('.update-action').val() == 'create' ? '#D7EAD9' : '#F5BE8B';
                    // Set color
                    $(this).find('td').css({'background-color': color});

                });
            }

            function setColors2() {
                // Loop rows
                $('.containers_table tr').each(function(){
                    // Get color from value of select
                    var color = '#F5BE8B';
                    // Set color
                    $(this).find('td').css({'background-color': color});

                });
            }
        }
    };

})(jQuery);




Aucun commentaire:

Enregistrer un commentaire