Change the color of a table row depending on multiple selection items / hide items

Question

I have a table. In each row, I have a “select it” flag, two selection fields and an additional flag.

When I show my page, the background color of each line is standard (white).

I need two things:

• For each value of the "Action" selection, I want the line to change its color, but only if the row checkbox is checked - green for "create" and red for "delete"

• If the value of the "Action" field is "delete", I want the second selection flag and the additional flag to be disabled.

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

How can i implement this? I do not know how to make these conditions work together.

Thanks.

NOTE. I use this code in Drupal, but it is generic. SECOND NOTE: This is used by drupal, so I am using a theme that already has css for the table. When I am, for example, for odd / even lines, some colors are already applied. I don’t know if this affects the code to implement what I need.

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); 

Answer 1

You must bind the change event to select and checkbox . Then

• Use $(this).closest('tr') to get the parent tr in the change event.
• Use $tr.find('.containers_table').is(':checked') to find the first status of the flag and consider it when the color changes.
• Use $tr.find('.update-card_configuration, .update-ne_configuration') to find additional select and checkbox . Enable / disable them using the prop() method depending on the value of the action.

 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> 

Answer 2

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 the preview link: https://codepen.io/ziruhel/pen/NwbKZK

If you need further customization, please allow me. I used 'keyup and blur' for input, if you use the drop-down list you can use 'click'. or let me know about the change.

Answer 3

Using a row template is only suitable if you are not going to use hierarchy, grouping, and editing columns. Grid does not support the simultaneous use of these functions and row patterns. This approach directly adds template expressions to the rowTemplate and altRowTemplate definitions and determines which custom CSS classes will be applied to this 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>