'How to change the class of a <td> sub element depending on the value of another <td> in the same <tr>

I have a multi column table where one td contains the order status and another td contains a button tag. What I want to achieve is to hide the button tag if the order status is set to 'Part complete' and show the button if the status is set to 'Not complete'. Below is html of one of the tr's in the table -

<tr class="order-row ui-sortable-handle" data-index="46929" data-position="4">
    <td style="text-align:center">4</td>
    <td style="text-align:center">46929</td>
    <td style="text-align:center">13/12/2021</td>
    <td style="text-align:center">PS Machine shop (X)</td>
    <td style="text-align:center">PSMAC</td>
    <td style="text-align:center">Part complete</td>
    <td style="text-align:center">1</td>
    <td style="text-align:center"><button class="hide-unassign unassign-button" type="button"><i class="icon_fa fas fa-trash"></i></button></td>
</tr>

I am using jQuery to .addClass hide-unassign to the button tag, css below -

.hide-unassign {
    display: none;
}

This works fine in hiding the button tag, but I am having no luck in only applying it if the value in the status td contains the text 'Part complete'.

Here is the jQuery I am running -

$("#Orders-Allocated").each(function(){
    $('.button').has('.td:contains("Part complete")').addClass(' hide-unassign');
});

and this adds the hide-unassign class to all button elements on all rows. Not what I want to achieve.

Any advice would be greatly appreciated.

htmljquery


Solution 1:[1]

You selected the button but you should select the table row. Also you added dots to 'button' and 'td'. Dots mean that they are classes. Elements don't have a prefix with dots

So here is an example that could work

$('tr')
  .has('td:contains("Part complete")')
  .find('button')
  .addClass('hide-unassign');

Instead of tr you could also use .order-row. Or if the #Orders-Allocated is the table row context/Id you can use this

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 M Ayasse

Related Questions