Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Change table row color depending on multiple selections/hide elements

Tags:

html

jquery

css

checkbox

select

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 - Green for 'create' and Red for 'delete'

  2. 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.

enter image description here

HTML:

<table class="containers_table sticky-enabled table-select-processed tableheader-processed sticky-table">
 <thead><tr><th class="select-all"><input type="checkbox" class="form-checkbox" title="Select all rows in this table"></th><th>Container</th><th></th><th></th><th></th><th>Action</th><th>Configuration</th><th>scripts</th> </tr></thead>
<tbody>
 <tr class="odd"><td style="background-color: rgb(215, 234, 217);"><div class="form-item form-type-checkbox form-item-containers-table-VT-1">
  <input class="containers_table form-checkbox" type="checkbox" id="edit-containers-table-vt-1" name="containers_table[VT_1]" value="VT_1">
</div>
</td><td style="background-color: rgb(215, 234, 217);">container 1</td><td style="background-color: rgb(215, 234, 217);">a</td><td style="background-color: rgb(215, 234, 217);">b</td><td style="background-color: rgb(215, 234, 217);">c</td><td style="background-color: rgb(215, 234, 217);"><div class="form-item form-type-select form-item-action-VT-1">
  <label class="element-invisible">Action for VT_1 </label>
 <select class="update-action form-select chosen-processed" name="action[VT_1]" style="display: none;"><option value="create">create</option><option value="delete">delete</option></select><div class="chosen-container chosen-container-single update-action form-select chosen-processed" title="" style="width: 300px;"><a class="chosen-single">
  <span>create</span>
  <div><b></b></div>
</a>
<div class="chosen-drop">
  <div class="chosen-search">
    <input class="chosen-search-input" type="text" autocomplete="off">
  </div>
  <ul class="chosen-results"></ul>
</div></div>
</div>
</td><td style="background-color: rgb(215, 234, 217);"><div class="form-item form-type-select form-item-card-configuration-VT-1">
  <label class="element-invisible">Card configuration for VT_1 </label>
 <select class="update-card_configuration form-select chosen-processed" name="card_configuration[VT_1]" style="display: none;"><option value="default">default</option><option value="HalSim_VT_1_OCC2">HalSim_VT_1_OCC2</option><option value="HalSim_VT_2_OCC2">HalSim_VT_2_OCC2</option><option value="HalSim_VT_3_OCC2">HalSim_VT_3_OCC2</option></select><div class="chosen-container chosen-container-single update-card_configuration form-select chosen-processed" title="" style="width: 300px;"><a class="chosen-single">
  <span>default</span>
  <div><b></b></div>
</a>
<div class="chosen-drop">
  <div class="chosen-search">
    <input class="chosen-search-input" type="text" autocomplete="off">
  </div>
  <ul class="chosen-results"></ul>
</div></div>
</div>
</td><td style="background-color: rgb(215, 234, 217);"><div class="form-item form-type-checkbox form-item-ne-configuration-VT-1">
  <label class="element-invisible">NE configuration for VT_1 </label>
 <input class="update-ne_configuration form-checkbox" type="checkbox" name="ne_configuration[VT_1]" value="1">
</div>
</td> </tr>
 <tr class="even"><td style="background-color: rgb(215, 234, 217);"><div class="form-item form-type-checkbox form-item-containers-table-VT-2">
  <input class="containers_table form-checkbox" type="checkbox" id="edit-containers-table-vt-2" name="containers_table[VT_2]" value="VT_2">
</div>
</td><td style="background-color: rgb(215, 234, 217);">container 2</td><td style="background-color: rgb(215, 234, 217);">d</td><td style="background-color: rgb(215, 234, 217);">e</td><td style="background-color: rgb(215, 234, 217);">f</td><td style="background-color: rgb(215, 234, 217);"><div class="form-item form-type-select form-item-action-VT-2">
  <label class="element-invisible">Action for VT_2 </label>
 <select class="update-action form-select chosen-processed" name="action[VT_2]" style="display: none;"><option value="create">create</option><option value="delete">delete</option></select><div class="chosen-container chosen-container-single update-action form-select chosen-processed" title="" style="width: 300px;"><a class="chosen-single">
  <span>create</span>
  <div><b></b></div>
</a>
<div class="chosen-drop">
  <div class="chosen-search">
    <input class="chosen-search-input" type="text" autocomplete="off">
  </div>
  <ul class="chosen-results"></ul>
</div></div>
</div>
</td><td style="background-color: rgb(215, 234, 217);"><div class="form-item form-type-select form-item-card-configuration-VT-2">
  <label class="element-invisible">Card configuration for VT_2 </label>
 <select class="update-card_configuration form-select chosen-processed" name="card_configuration[VT_2]" style="display: none;"><option value="default">default</option><option value="HalSim_VT_1_OCC2">HalSim_VT_1_OCC2</option><option value="HalSim_VT_2_OCC2">HalSim_VT_2_OCC2</option><option value="HalSim_VT_3_OCC2">HalSim_VT_3_OCC2</option></select><div class="chosen-container chosen-container-single update-card_configuration form-select chosen-processed" title="" style="width: 300px;"><a class="chosen-single">
  <span>default</span>
  <div><b></b></div>
</a>
<div class="chosen-drop">
  <div class="chosen-search">
    <input class="chosen-search-input" type="text" autocomplete="off">
  </div>
  <ul class="chosen-results"></ul>
</div></div>
</div>
</td><td style="background-color: rgb(215, 234, 217);"><div class="form-item form-type-checkbox form-item-ne-configuration-VT-2">
  <label class="element-invisible">NE configuration for VT_2 </label>
 <input class="update-ne_configuration form-checkbox" type="checkbox" name="ne_configuration[VT_2]" value="1">
</div>
</td> </tr>
 </tbody>
</table>

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);
like image 851
zephirus Avatar asked Nov 03 '17 18:11

zephirus

3 Answers

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

  1. Use $(this).closest('tr') to get parent tr in change event.
  2. Use $tr.find('.containers_table').is(':checked') to find first checkbox status and consider it when changing color.
  3. 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();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="containers_table sticky-enabled table-select-processed tableheader-processed sticky-table">
  <thead>
    <tr>
      <th class="select-all">
        <input type="checkbox">
      </th>
      <th>Container</th>
      <th></th>
      <th></th>
      <th></th>
      <th>Action</th>
      <th>Configuration</th>
      <th>scripts</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input class="containers_table" type="checkbox">
      </td>
      <td>container 1</td>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>
        <label>Action for VT_1 </label>
        <select class="update-action">
          <option value="create">create</option>
          <option value="delete">delete</option>
        </select>
      </td>
      <td>
        <label>Card configuration for VT_1 </label>
        <select class="update-card_configuration">
          <option value="default">default</option>
          <option value="HalSim_VT_1_OCC2">HalSim_VT_1_OCC2</option>
          <option value="HalSim_VT_2_OCC2">HalSim_VT_2_OCC2</option>
          <option value="HalSim_VT_3_OCC2">HalSim_VT_3_OCC2</option>
        </select>
      </td>
      <td>
        <label>NE configuration for VT_1 </label>
        <input class="update-ne_configuration" type="checkbox">
      </td>
    </tr>
    <tr>
      <td>
        <input class="containers_table" type="checkbox">
      </td>
      <td>container 2</td>
      <td>a</td>
      <td>b</td>
      <td>c</td>
      <td>
        <label>Action for VT_2 </label>
        <select class="update-action">
          <option value="create">create</option>
          <option value="delete">delete</option>
        </select>
      </td>
      <td>
        <label>Card configuration for VT_2 </label>
        <select class="update-card_configuration">
          <option value="default">default</option>
          <option value="HalSim_VT_1_OCC2">HalSim_VT_1_OCC2</option>
          <option value="HalSim_VT_2_OCC2">HalSim_VT_2_OCC2</option>
          <option value="HalSim_VT_3_OCC2">HalSim_VT_3_OCC2</option>
        </select>
      </td>
      <td>
        <label>NE configuration for VT_2 </label>
        <input class="update-ne_configuration" type="checkbox">
      </td>
    </tr>
  </tbody>
</table>
like image 95
Ibrahim Khan Avatar answered Oct 17 '22 11:10

Ibrahim Khan

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.

like image 3
Zahidul Islam Ruhel Avatar answered Oct 17 '22 09:10

Zahidul Islam Ruhel

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.

<style>
  .k-grid {
    width: 500px;
  }

  .discontinued {
    font-weight: bold;
    color: #f00;
  }
  .critical {
    background-color: #fdd;
  }

  .warning {
    background-color: #fda;
  }

  .ok {
    background-color: #ced;
  }

</style>


<div id="grid-rowtemplate"></div>
<script>
  // sample datasource
  var products = [
    { ID: 1, ProductName: "Foo", UnitsInStock: 9, Discontinued: false },
    { ID: 2, ProductName: "Bar", UnitsInStock: 16, Discontinued: false },
    { ID: 3, ProductName: "Baz", UnitsInStock: 3, Discontinued: true }
  ];


  var rowTemplateString = '<tr class="#: Discontinued ? "discontinued" : "" #" data-uid="#: uid #">' +
      '<td>#: ProductName #</td>' +
      '<td class="#: getUnitsInStockClass(UnitsInStock) #">#: UnitsInStock #</td>' +
      '<td>#: Discontinued #</td>' +
      '</tr>';

  var altRowTemplateString = rowTemplateString.replace('tr class="', 'tr class="k-alt ');

  function getUnitsInStockClass(units) {
    if (units < 5) {
      return "critical";
    } else if (units < 10) {
      return "warning";
    } else {
      return "ok";
    }
  }

  $(document).ready(function () {
    $("#grid-rowtemplate").kendoGrid({
      dataSource: {
        data: products,
        schema: {
          model: {
            id: "ID",
            fields: {
              ID: { type: "number" },
              ProductName: { },
              UnitsInStock: { type: "number" },
              Discontinued: { type: "boolean" }
            }
          }
        }
      },
      sortable: true,
      columns: [
        { field: "ProductName", title: "Product Name" },
        { field: "UnitsInStock", title:"Units In Stock", width: "120px" },
        { field: "Discontinued", width: "120px" }
      ],
      rowTemplate: rowTemplateString,
      altRowTemplate: altRowTemplateString
    });
  });
</script>
like image 2
Joseph Charles Avatar answered Oct 17 '22 10:10

Joseph Charles
Sign in to Comment

Related questions

Reload page when user returns from other tab
Adding parent div over multiple divs
What is the jQuery equivalent for pageYOffset?
Split text into equal length strings keeping words intact
Angular2 on focus event to add class
Check if a text is HTML or not
how to keep submenu with images centered in bootstrap nav-pill
jQuery: If key exists in array, get value
Using Wikipedia's API to fetch results from search query
Cannot init an object in jquery document.ready
.css() won't get applied after a delay
Dynamically create object keys in IE 11 (Expected identifier, string or number, not a comma issue)
cheerio selector for first nested html element
Remove all child of a div by class
reportValidity() in jquery?
Comparing time with MomentJS
How to set the href in a DataTables button?
Jquery show/hide based on variable (not toggle) [duplicate]
Sprockets::FileNotFound: couldn't find file 'jquery' with type 'application/javascript' Heroku in Rails App
Change Select value with Jquery

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!