Change table row color depending on multiple selections/hide elements

Question

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:

For each "Action" select box value, I want the row to change its color but only if the row checkbox is checked - Green for 'create' and Red for 'delete'
If the "Action" select box value is equal 'delete', 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.

NOTE: I'm using this code in Drupal but it's generic. SECOND NOTE: This is used in drupal so I'm using a theme that has already css for the table. When I hover for example and for odd/even rows, some colors are already being applied. Don't know if this has impact on the code to implement what I need.

HTML:


 Container Action Configuration scripts  

 
  

container 1 a b c 
  Action for VT_1 
 
  create
  


  
    
  
  



  Card configuration for VT_1 
 
  default
  


  
    
  
  



  NE configuration for VT_1 
 

 
 
  

container 2 d e f 
  Action for VT_2 
 
  create
  


  
    
  
  



  Card configuration for VT_2 
 
  default
  


  
    
  
  



  NE configuration for VT_2

JQUERY:

(function($) {
    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);

user_2755131 · Answer

You have to bind change event to both select and checkbox. Then

Use $(this).closest('tr') to get parent tr in change event.
Use $tr.find('.containers_table').is(':checked') to find first checkbox status and consider it when changing color.
Use $tr.find('.update-card_configuration, .update-ne_configuration') to find extra select & checkbox. And enable/disable these using prop() method depending on action value.

var Drupal = function() {};
Drupal.behaviors = function() {};

(function($) {
  Drupal.behaviors.mymoduleColorRows = {
    attach: function(context) {

      // Bind change event to select
      $('.update-action, .containers_table').change(function() {
        // Get color from value of select & checkbox
        var $tr = $(this).closest('tr'),
          color = '#F5BE8B',
          value = $tr.find('.update-action').val(),
          status = $tr.find('.containers_table').is(':checked');

        if (value == 'create' && status)
          color = '#D7EAD9';

        //enable/disable extra select box and checkbox
        $tr.find('.update-card_configuration, .update-ne_configuration').prop('disabled', value == 'delete');

        // Set color
        $tr.css('background-color', color);
      });

      //call event on first page load
      $('.update-action').change();
    }
  };
})(jQuery);

Drupal.behaviors.mymoduleColorRows.attach();



  
    
      
        
      
      Container
      
      
      
      Action
      Configuration
      scripts
    
  
  
    
      
        
      
      container 1
      a
      b
      c
      
        Action for VT_1 
        
      
      
        Card configuration for VT_1 
        
      
      
        NE configuration for VT_1 
        
      
    
    
      
        
      
      container 2
      a
      b
      c
      
        Action for VT_2 
        
      
      
        Card configuration for VT_2 
        
      
      
        NE configuration for VT_2

user_8850512 · Answer

I found a solution for you:

    $(document).on('blur, keyup', '.update-action .chosen-search-input', function () {
//$(document).on('change', '.update-action', function () { // For select option
        var specipicValue = 'test'//this is just specific value
        var value = $(this).val();
        if ($(this).val()) {
            if ($(this).parents('tr').find('.form-checkbox').is(':checked')) {
                $(this).parents('tr').find('td').css("color", "red");                
            }
            else{
                $(this).parents('tr').find('td').css("color", "unset");  
            }
            if (value == specipicValue) {
                    $(this).parents('tr').find('.update-card_configuration').find('.chosen-search-input').prop("disabled", true);
                    $(this).parents('tr').find('.update-ne_configuration').attr("disabled", true);
                }
            else{
                $(this).parents('tr').find('.update-card_configuration').find('.chosen-search-input').prop("disabled", false);
                    $(this).parents('tr').find('.update-ne_configuration').attr("disabled", false);
            }
        }

    });

Here is preview link:https://codepen.io/ziruhel/pen/NwbKZK

_if you need more customization please let me _ I used for input on 'keyup & in blur', if you use dropdown select you can use 'click'. or let me know for modification.

user_7247393 · Answer

The usage of a row template is suitable only if you do not intend to use hierarchy, grouping, and editing columns. the Grid does not support the simultaneous application of these features and row templates. The approach directly adds template expressions to the rowTemplate and altRowTemplate definitions and determines which custom CSS classes will be applied to a given row or cell.

Change table row color depending on multiple selections/hide elements

3 Answers