Question

我试图通过具有<td>类来更改表/ <tr>中第一个<td>的边框颜色/如果第二个.wcpv-order-status-completed是完整的{}

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

尝试使用jQuery和PHP if语句

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

每个设置都是这样。第2次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> s

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

Answer 1

我创建了一个带有tr标记的页面，其中某些第二个td标记具有您提到的类，而其他的则没有。最后，有一个按钮可以验证哪些标签具有该类。

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

<td>内的第一个<tr>

在td中选择第一个tr：

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

如果第二个<td>通过拥有.wcpv-order-status-completed类来完成

检查第二个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");
    }
  });
}

示例

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 3

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

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

这将找到具有<tr>的{{1}}。在该.wcpv-order-status-completed中，为<tr>链接添加绿色边框。

也就是说，为了获得最大的效率，请将其分成几部分。

order_id

每the documentation：

由于$("tr").has(".wcpv-order-status-completed").find("td.order_id a").css("border", "solid green");是jQuery扩展，而不是CSS规范的一部分，因此使用:has()的查询无法利用本机DOM :has()方法提供的性能提升。 要在现代浏览器中获得更好的性能，请改用querySelectorAll()。

添加到您的代码中，如下所示：

$( "your-pure-css-selector" ).has( selector/DOMElement )

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

Answer 4

您需要更改<td>的第一个<tr>的边界颜色，其中<td>的其他元素具有特定的类。

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

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

  });

如果tr hasClass更改边框颜色

4 个答案: