Change border color if tr hasClass

Question

I am trying to change border color of 1st <td> inside a table / <tr> if the 2nd <td> is complete by having the class of .wcpv-order-status-completed

On a page with a couple of <tr> how can I target only the ones that have order-status-completed?

Tried with jQuery and PHP if-statement

$(document).ready(function(){
  $("tr:has(.wcpv-order-status-completed)").css("border", "solid green");
});

Each is setup like this. 2nd td will change either being wcpv-order-status-completed or processing:

<tr>
   <th scope="row" class="check-column"><input type="checkbox" name="ids[6]" value="5"></th>
   <td class="order_id column-order_id has-row-actions column-primary" data-colname="Booking"><a href="https://example.com/wp-admin/12" class="wcpv-vendor-order-by-id">1528</a><button type="button" class="toggle-row"><span class="screen-reader-text">Vis for flere detaljer</span></button></td>
   <td class="order_status column-order_status" data-colname="Booking status"><span class="wcpv-order-status-completed">Gennemført</span></td>
   <td class="order_date column-order_date" data-colname="Booking dato">June 5, 2019 9:19 am</td>
   <td class="shipping_address column-shipping_address" data-colname="Shipping"></td>
   <td class="product_name column-product_name" data-colname="Product"><a class="post-edit-link" href="https://example.com/admin/123"</a></td>
   <td class="total_commission_amount column-total_commission_amount" data-colname="Commission"><span class="woocommerce-Price-amount amount">350&nbsp;<span class="woocommerce-Price-currencySymbol">DKK</span></span></td>
   <td class="commission_status column-commission_status" data-colname="Kommission Status"><span class="wcpv-unpaid-status">UBETALT</span></td>
   <td class="paid_date column-paid_date" data-colname="Paid Date">0000-00-00 00:00:00</td>
   <td class="fulfillment_status column-fulfillment_status" data-colname="Udførselsstatus"><span class="wcpv-fulfilled-status">Opfyldt</span></td>
</tr>

I am trying to have the border on the 1st <td> which has selector: .vendor td.order_id a

However, the selector above will affect all of the <tr> s

I expect border color change to green if order status is completed.

Answer 1

You can slightly modify your :has() selector:

$("tr:has(.wcpv-order-status-completed) td.order_id a").css("border", "solid green");

This will find a <tr> that has a .wcpv-order-status-completed . Within that <tr> , give the order_id link a green border.

That said, for max efficiency, break it into pieces.

$("tr").has(".wcpv-order-status-completed").find("td.order_id a").css("border", "solid green");

Per the documentation :

Because :has() is a jQuery extension and not part of the CSS specification, queries using :has() cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. For better performance in modern browsers, use $( "your-pure-css-selector" ).has( selector/DOMElement ) instead.

Added to your code, it looks like this:

 $("tr").has(".wcpv-order-status-completed").find("td.order_id a").css("border", "solid green");

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <th scope="row" class="check-column"><input type="checkbox" name="ids[6]" value="5"></th> <td class="order_id column-order_id has-row-actions column-primary" data-colname="Booking"><a href="https://example.com/wp-admin/12" class="wcpv-vendor-order-by-id">1528</a><button type="button" class="toggle-row"><span class="screen-reader-text">Vis for flere detaljer</span></button></td> <td class="order_status column-order_status" data-colname="Booking status"><span class="wcpv-order-status-completed">COMPLETED</span></td> <td class="order_date column-order_date" data-colname="Booking dato">June 5, 2019 9:19 am</td> <td class="shipping_address column-shipping_address" data-colname="Shipping"></td> <td class="product_name column-product_name" data-colname="Product"> <a class="post-edit-link" href="https://example.com/admin/123"></a> </td> <td class="total_commission_amount column-total_commission_amount" data-colname="Commission"><span class="woocommerce-Price-amount amount">350&nbsp;<span class="woocommerce-Price-currencySymbol">DKK</span></span> </td> <td class="commission_status column-commission_status" data-colname="Kommission Status"><span class="wcpv-unpaid-status">UBETALT</span></td> <td class="paid_date column-paid_date" data-colname="Paid Date">0000-00-00 00:00:00</td> <td class="fulfillment_status column-fulfillment_status" data-colname="Udførselsstatus"><span class="wcpv-fulfilled-status">Opfyldt</span></td> </tr> <tr> <th scope="row" class="check-column"><input type="checkbox" name="ids[6]" value="5"></th> <td class="order_id column-order_id has-row-actions column-primary" data-colname="Booking"><a href="https://example.com/wp-admin/12" class="wcpv-vendor-order-by-id">1528</a><button type="button" class="toggle-row"><span class="screen-reader-text">Vis for flere detaljer</span></button></td> <td class="order_status column-order_status" data-colname="Booking status"><span class="">NOT COMPLETED</span></td> <td class="order_date column-order_date" data-colname="Booking dato">June 5, 2019 9:19 am</td> <td class="shipping_address column-shipping_address" data-colname="Shipping"></td> <td class="product_name column-product_name" data-colname="Product"> <a class="post-edit-link" href="https://example.com/admin/123"></a> </td> <td class="total_commission_amount column-total_commission_amount" data-colname="Commission"><span class="woocommerce-Price-amount amount">350&nbsp;<span class="woocommerce-Price-currencySymbol">DKK</span></span> </td> <td class="commission_status column-commission_status" data-colname="Kommission Status"><span class="wcpv-unpaid-status">UBETALT</span></td> <td class="paid_date column-paid_date" data-colname="Paid Date">0000-00-00 00:00:00</td> <td class="fulfillment_status column-fulfillment_status" data-colname="Udførselsstatus"><span class="wcpv-fulfilled-status">Opfyldt</span></td> </tr> </table>

Answer 2

I created a page with tr tags where some second td tags have the class you mentioned while others don't. At the end, there is a button that makes the validation of which tags has the class.

 <!DOCTYPE html> <html> <head> <meta charset = "UTF-8" /> <title>Teste</title> <style> td { width: 100px; text-align: center; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> </head> <body> <table> <tr> <td>1st TD</td> <td class = "wcpv-order-status-completed">2nd TD</td> </tr> <tr> <td>1st TD</td> <td>2nd TD</td> </tr> <tr> <td>1st TD</td> <td>2nd TD</td> </tr> <tr> <td>1st TD</td> <td class = "wcpv-order-status-completed">2nd TD</td> </tr> <tr> <td>1st TD</td> <td class = "wcpv-order-status-completed">2nd TD</td> </tr> </table> <button>Test</button> <script type = "text/javascript"> $(document).ready(function() { $("button").click(function() { $("tr").each(function() { if ($(this).find("td").eq(1).hasClass("wcpv-order-status-completed")) { $(this).find("td").eq(0).css("border", "1px solid green"); } }); }); }); </script> </body> </html>

Answer 3

1st <td> inside a <tr>

Select first td inside tr :

highLightIfCompleted($table( {
  var $rows = $('tr');
  $rows.each(function(i,e) {
    var $row = $(e);
    var $firstTd = $row.find('td:eq(1)');
  });
}

if the 2nd <td> is complete by having the class of .wcpv-order-status-completed

Check the second TD:

highLightIfCompleted($table( {
  var $rows = $('tr');
  $rows.each(function(i,e) {
    var $row = $(e);
    var $firstTd = $row.find('td:eq(0)');
    var $secondTd = $row.find('td.eq(1)');
    if ($secondTd.hasClass('wcpv-order-status-completed') {
      $secondTd.css("border", "solid green");
    }
  });
}

Example

 function highLightIfCompleted() { var $rows = $('tr'); $rows.each(function(i,e) { var $row = $(e); var $firstTd = $row.find('td:eq(0)'); var $secondTd = $row.find('td:eq(1)'); if ($secondTd.hasClass('wcpv-order-status-completed')) { $firstTd.css("border", "solid green"); } }); } setTimeout(highLightIfCompleted, 5000);

 .wcpv-order-status-completed { font-weight: bold; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <td>Row 1 Cell 1</td> <td>Row 1 Cell 2</td> </tr> <tr> <td>Row 1 Cell 1</td> <td class="wcpv-order-status-completed">Row 1 Cell 2</td> </tr> </table>

Answer 4

You need to change the boarder color of the first <td> of a <tr> which has other <td> elements with a specific class.

$('tr').each((i, raw) => {

    $(raw).children('td.wcpv-order-status-completed').length > 0
       $(raw).children('td').first().css('background-color', 'red');

  });