时间戳

首页 > 解决方案 > 如果 tr hasClass 更改边框颜色

jquery - 如果 tr hasClass 更改边框颜色

问题描述

我正在尝试更改<td>表格内第一个的边框颜色/<tr>如果第二个<td>是完整的.wcpv-order-status-completed

在一个页面上，<tr>我如何才能只定位那些订单状态已完成的页面？

尝试使用 jQuery 和 PHP if 语句

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

每个都是这样设置的。第二个 td 将更改为 wcpv-order-status-completed 或正在处理：

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

我试图在第<td>一个有选择器的边框上设置：.vendor td.order_id a

但是，上面的选择器会影响所有<tr>的

如果订单状态完成，我希望边框颜色变为绿色。

标签： jquerycss

解决方案

您可以稍微修改您的:has()选择器：

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

这将找到<tr>具有.wcpv-order-status-completed. 在其中<tr>，给order_id链接一个绿色边框。

也就是说，为了最大限度地提高效率，请将其分成几部分。

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

根据文档：

因为:has()是 jQuery 扩展而不是 CSS 规范的一部分，所以使用的查询:has()不能利用原生 DOMquerySelectorAll()方法提供的性能提升。为了在现代浏览器中获得更好的性能，请$( "your-pure-css-selector" ).has( selector/DOMElement )改用。

添加到您的代码中，它看起来像这样：

$("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>

推荐阅读