如果数量相同，则jQuery着色表行
Posted
技术标签:
【中文标题】如果数量相同，则jQuery着色表行【英文标题】：jQuery coloring table row if quantity is same 【发布时间】：2021-10-20 05:12:41 【问题描述】：我有一个包含订单商品的表格，有一个数量输入框和一个包含已订购数量的字段。
如果数量输入框的值与已订购的数量相同，我希望它为绿色。
现在我已经让它工作了一点，但我的知识只到此为止。不知何故，它仅在我按顺序单击项目时才有效，因此我必须单击第一行的输入框..并且当它与订购的数量匹配时才有效。
但如果我先点击第二个行项.. 它将不起作用。
这是 Jquery。如何编辑它，这样我先使用哪一行都没有关系？
jQuery('.qtyplus').click(function(e)
e.preventDefault();
var $this = jQuery(this);
var $target = $this.prev('input[name=' + $this.attr('field') + ']');
var currentVal = parseInt($target.val());
if (!isNaN(currentVal))
$target.val(currentVal + 1);
else
$target.val(0);
);
jQuery(".qtyminus").click(function(e)
e.preventDefault();
var $this = jQuery(this);
var $target = $this.next('input[name=' + $this.attr('field') + ']');
var currentVal = parseInt($target.val());
if (!isNaN(currentVal))
$target.val((currentVal == 0) ? 0 : currentVal - 1);
else
$target.val(0);
);
jQuery("#quantity , .qtyplus, .qtyminus").on("propertychange change click keyup input paste blur", function(e)
e.preventDefault();
var table = document.getElementById('order_line_items');
var length = table.rows.length;
var x = document.getElementsByTagName("tr");
for (var i = 0; i < x.length; i++)
var $qty = jQuery('#quantity').val();
var $hoeveelheid = document.querySelector("#hoeveelheid").innerhtml;
var $qtyrow = $qty[i];
var $hoeveelheidrow = $hoeveelheid[i];
if ($qtyrow == $hoeveelheidrow)
jQuery(this).closest("tr").css('background-color', '#00FF00');
);
jQuery("#quantity , .qtyplus, .qtyminus").on("propertychange change click keyup input paste blur", function(e)
e.preventDefault();
var table = document.getElementById('order_line_items');
var length = table.rows.length;
var x = document.getElementsByTagName("tr");
for (var i = 0; i < x.length; i++)
var $qty = jQuery('#quantity').val();
var $hoeveelheid = document.querySelector("#hoeveelheid").innerHTML;
var $qtyrow = $qty[i];
var $hoeveelheidrow = $hoeveelheid[i];
if ($qtyrow != $hoeveelheidrow)
jQuery(this).closest("tr").css('background-color', '#FFFFFF');
);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table cellpadding="0" cellspacing="0" class="woocommerce_order_items">
<thead>
<tr>
<th class="item sortable" colspan="2" data-sort="string-ins">Artikel</th>
<th>Barcode</th><th>Geteld</th><th>hoeveel</th> <th class="item_cost sortable" data-sort="float">Kosten</th>
<th class="quantity sortable" data-sort="int">Aantal</th>
<th class="line_cost sortable" data-sort="float">Totaal</th>
<th class="line_tax tips">
Producten BTW Hoog <input type="hidden" class="order-tax-id" name="order_taxes[396]" value="1">
<a class="delete-order-tax" href="#" data-rate_id="396"></a>
</th>
<th class="wc-order-edit-line-item" > </th>
</tr>
</thead>
<tbody id="order_line_items">
<tr class="item " data-order_item_id="393" style="background-color: rgb(255, 255, 255);">
<td class="thumb">
<div class="wc-order-item-thumbnail"><img src="" class="attachment-thumbnail size-thumbnail" loading="lazy" title=""></div> </td>
<td class="name" data-sort-value="testing (kopie)">
<a href="" class="wc-order-item-name">testing (kopie)</a><div class="wc-order-item-sku"><strong>Artikelnummer:</strong> 1234-1</div> <input type="hidden" class="order_item_id" name="order_item_id[]" value="393">
<input type="hidden" name="order_item_tax_class[393]" value="">
<div class="view">
</div>
<div class="edit" style="display: none;">
<table class="meta" cellspacing="0">
<tbody class="meta_items">
</tbody>
<tfoot>
<tr>
<td colspan="4"><button class="add_order_item_meta button">Meta toevoegen</button></td>
</tr>
</tfoot>
</table>
</div>
</td>
<td></td> <td class="cart_quantity">
<input type="button" value="-" class="qtyminus" field="quantity">
<input type="text" name="quantity" id="quantity" value="0" class="qty">
<input type="button" value="+" id="qtyplus" class="qtyplus" field="quantity">
</td><td id="hoeveelheid" class="hoeveelheid">1</td>
<td class="item_cost" data-sort-value="1836.36">
<div class="view">
<span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">€</span>1.836,36</bdi></span> </div>
</td>
<td class="quantity" >
<div class="view">
<small class="times">×</small> 1 </div>
<div class="edit" style="display: none;">
<input type="number" step="1" min="0" autocomplete="off" name="order_item_qty[393]" placeholder="0" value="1" data-qty="1" size="4" class="quantity">
</div>
<div class="refund" style="display: none;">
<input type="number" step="1" min="0" max="1" autocomplete="off" name="refund_order_item_qty[393]" placeholder="0" size="4" class="refund_order_item_qty">
</div>
</td>
<td class="line_cost" data-sort-value="1836.363636">
<div class="view">
<span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">€</span>1.836,36</bdi></span> </div>
<div class="edit" style="display: none;">
<div class="split-input">
<div class="input">
<label>Vóór korting</label>
<input type="text" name="line_subtotal[393]" placeholder="0" value="1836,363636" class="line_subtotal wc_input_price" data-subtotal="1836,363636">
</div>
<div class="input">
<label>Totaal</label>
<input type="text" name="line_total[393]" placeholder="0" value="1836,363636" class="line_total wc_input_price" data-tip="Nadat kortingen vóór belastingheffing toegepast worden" data-total="1836,363636">
</div>
</div>
</div>
<div class="refund" style="display: none;">
<input type="text" name="refund_line_total[393]" placeholder="0" class="refund_line_total wc_input_price">
</div>
</td>
<td class="line_tax" >
<div class="view">
<span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">€</span>385,64</bdi></span> </div>
<div class="edit" style="display: none;">
<div class="split-input">
<div class="input">
<label>Vóór korting</label>
<input type="text" name="line_subtotal_tax[393][1]" placeholder="0" value="385,64" class="line_subtotal_tax wc_input_price" data-subtotal_tax="385,64" data-tax_id="1">
</div>
<div class="input">
<label>Totaal</label>
<input type="text" name="line_tax[393][1]" placeholder="0" value="385,64" class="line_tax wc_input_price" data-total_tax="385,64" data-tax_id="1">
</div>
</div>
</div>
<div class="refund" style="display: none;">
<input type="text" name="refund_line_tax[393][1]" placeholder="0" class="refund_line_tax wc_input_price" data-tax_id="1">
</div>
</td>
<td class="wc-order-edit-line-item" >
<div class="wc-order-edit-line-item-actions">
<a class="edit-order-item tips" href="#"></a><a class="delete-order-item tips" href="#"></a>
</div>
</td>
</tr>
<tr class="item " data-order_item_id="394" style="background-color: rgb(255, 255, 255);">
<td class="thumb">
<div class="wc-order-item-thumbnail"><img src="" class="attachment-thumbnail size-thumbnail" loading="lazy" title=""></div> </td>
<td class="name" data-sort-value="testing">
<a href="" class="wc-order-item-name">testing</a><div class="wc-order-item-sku"><strong>Artikelnummer:</strong> 1234</div> <input type="hidden" class="order_item_id" name="order_item_id[]" value="394">
<input type="hidden" name="order_item_tax_class[394]" value="">
<div class="view">
</div>
<div class="edit" style="display: none;">
<table class="meta" cellspacing="0">
<tbody class="meta_items">
</tbody>
<tfoot>
<tr>
<td colspan="4"><button class="add_order_item_meta button">Meta toevoegen</button></td>
</tr>
</tfoot>
</table>
</div>
</td>
<td></td> <td class="cart_quantity">
<input type="button" value="-" class="qtyminus" field="quantity">
<input type="text" name="quantity" id="quantity" value="0" class="qty">
<input type="button" value="+" id="qtyplus" class="qtyplus" field="quantity">
</td><td id="hoeveelheid" class="hoeveelheid">1</td>
<td class="item_cost" data-sort-value="1836.36">
<div class="view">
<span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">€</span>1.836,36</bdi></span> </div>
</td>
<td class="quantity" >
<div class="view">
<small class="times">×</small> 1 </div>
<div class="edit" style="display: none;">
<input type="number" step="1" min="0" autocomplete="off" name="order_item_qty[394]" placeholder="0" value="1" data-qty="1" size="4" class="quantity">
</div>
<div class="refund" style="display: none;">
<input type="number" step="1" min="0" max="1" autocomplete="off" name="refund_order_item_qty[394]" placeholder="0" size="4" class="refund_order_item_qty">
</div>
</td>
<td class="line_cost" data-sort-value="1836.363636">
<div class="view">
<span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">€</span>1.836,36</bdi></span> </div>
<div class="edit" style="display: none;">
<div class="split-input">
<div class="input">
<label>Vóór korting</label>
<input type="text" name="line_subtotal[394]" placeholder="0" value="1836,363636" class="line_subtotal wc_input_price" data-subtotal="1836,363636">
</div>
<div class="input">
<label>Totaal</label>
<input type="text" name="line_total[394]" placeholder="0" value="1836,363636" class="line_total wc_input_price" data-tip="Nadat kortingen vóór belastingheffing toegepast worden" data-total="1836,363636">
</div>
</div>
</div>
<div class="refund" style="display: none;">
<input type="text" name="refund_line_total[394]" placeholder="0" class="refund_line_total wc_input_price">
</div>
</td>
<td class="line_tax" >
<div class="view">
<span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">€</span>385,64</bdi></span> </div>
<div class="edit" style="display: none;">
<div class="split-input">
<div class="input">
<label>Vóór korting</label>
<input type="text" name="line_subtotal_tax[394][1]" placeholder="0" value="385,64" class="line_subtotal_tax wc_input_price" data-subtotal_tax="385,64" data-tax_id="1">
</div>
<div class="input">
<label>Totaal</label>
<input type="text" name="line_tax[394][1]" placeholder="0" value="385,64" class="line_tax wc_input_price" data-total_tax="385,64" data-tax_id="1">
</div>
</div>
</div>
<div class="refund" style="display: none;">
<input type="text" name="refund_line_tax[394][1]" placeholder="0" class="refund_line_tax wc_input_price" data-tax_id="1">
</div>
</td>
<td class="wc-order-edit-line-item" >
<div class="wc-order-edit-line-item-actions">
<a class="edit-order-item tips" href="#"></a><a class="delete-order-item tips" href="#"></a>
</div>
</td>
</tr>
</tbody>
<tbody id="order_fee_line_items">
</tbody>
<tbody id="order_shipping_line_items">
<tr class="shipping " data-order_item_id="395">
<td class="thumb"><div></div></td>
<td class="name">
<div class="view">
Thuis bezorgen </div>
<div class="edit" style="display: none;">
<input type="hidden" name="shipping_method_id[]" value="395">
<input type="text" class="shipping_method_name" placeholder="Verzendnaam" name="shipping_method_title[395]" value="Thuis bezorgen">
<select class="shipping_method" name="shipping_method[395]">
<optgroup label="Verzendmethode">
<option value="">Niet beschikbaar</option>
<option value="flat_rate">Vast Tarief</option><option value="free_shipping">Gratis verzending</option><option value="local_pickup">Afhalen</option><option value="dhlpwc" selected="selected">DHL in WooCommerce</option><option value="other">Anders</option> </optgroup>
</select>
</div>
<div class="view">
<table cellspacing="0" class="display_meta">
<tbody><tr>
<th>sort_position:</th>
<td><p>1</p>
</td>
</tr>
</tbody></table>
</div>
<div class="edit" style="display: none;">
<table class="meta" cellspacing="0">
<tbody class="meta_items">
<tr data-meta_id="2887">
<td>
<input type="text" maxlength="255" placeholder="Naam (vereist)" name="meta_key[395][2887]" value="sort_position">
<textarea placeholder="Waarde (vereist)" name="meta_value[395][2887]">1</textarea>
</td>
<td ><button class="remove_order_item_meta button">×</button></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4"><button class="add_order_item_meta button">Meta toevoegen</button></td>
</tr>
</tfoot>
</table>
</div>
</td>
<td></td> <td class="cart_quantity">
<input type="button" value="-" class="qtyminus" field="quantity">
<input type="text" name="quantity" id="quantity" value="0" class="qty">
<input type="button" value="+" id="qtyplus" class="qtyplus" field="quantity">
</td><td id="hoeveelheid" class="hoeveelheid">1</td>
<td class="item_cost" > </td>
<td class="quantity" > </td>
<td class="line_cost" >
<div class="view">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">€</span>0,00</span> </div>
<div class="edit" style="display: none;">
<input type="text" name="shipping_cost[395]" placeholder="0" value="0,00" class="line_total wc_input_price">
</div>
<div class="refund" style="display: none;">
<input type="text" name="refund_line_total[395]" placeholder="0" class="refund_line_total wc_input_price">
</div>
</td>
<td class="line_tax" >
<div class="view">
– </div>
<div class="edit" style="display: none;">
<input type="text" name="shipping_taxes[395][1]" placeholder="0" value="" class="line_tax wc_input_price">
</div>
<div class="refund" style="display: none;">
<input type="text" name="refund_line_tax[395][1]" placeholder="0" class="refund_line_tax wc_input_price" data-tax_id="1">
</div>
</td>
<td class="wc-order-edit-line-item">
<div class="wc-order-edit-line-item-actions">
<a class="edit-order-item" href="#"></a><a class="delete-order-item" href="#"></a>
</div>
</td>
</tr>
</tbody>
<tbody id="order_refunds">
</tbody>
</table>【问题讨论】：
【参考方案1】：首先定义一个设置颜色的函数，它接受最接近的 +/- 按钮行和数量输入作为参数
并在事件中使用它
// Define function
function set_color(row_element)
if( parseInt($(row_element).find('.qty').val()) == parseInt($(row_element).find('.hoeveelheid').text()) )
$(row_element).css('background-color', '#00FF00');
else
$(row_element).css('background-color', '#FFFFFF');
jQuery('.qtyplus').click(function(e)
e.preventDefault();
// Get closest row element
var row_element = $(this).closest('tr');
var $target = $(this).prev('input[name=' + $(this).attr('field') + ']');
var currentVal = parseInt($target.val());
if (!isNaN(currentVal))
$target.val(currentVal + 1);
else
$target.val(0);
set_color(row_element);
);
jQuery(".qtyminus").click(function(e)
e.preventDefault();
;
// Get closest row element
var row_element = $(this).closest('tr');
var $target = $(this).next('input[name=' + $(this).attr('field') + ']');
var currentVal = parseInt($target.val());
if (!isNaN(currentVal))
$target.val((currentVal == 0) ? 0 : currentVal - 1);
else
$target.val(0);
set_color(row_element);
);
jQuery("#quantity , .qtyplus, .qtyminus").on("propertychange change click keyup input paste blur", function(e)
e.preventDefault();
// Get closest row element
var row_element = $(this).closest('tr');
set_color(row_element);
);
jQuery("#quantity , .qtyplus, .qtyminus").on("propertychange change click keyup input paste blur", function(e)
e.preventDefault();
// Get closest row element
var row_element = $(this).closest('tr');
set_color(row_element);
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table cellpadding="0" cellspacing="0" class="woocommerce_order_items">
<thead>
<tr>
<th class="item sortable" colspan="2" data-sort="string-ins">Artikel</th>
<th>Barcode</th>
<th>Geteld</th>
<th>hoeveel</th>
<th class="item_cost sortable" data-sort="float">Kosten</th>
<th class="quantity sortable" data-sort="int">Aantal</th>
<th class="line_cost sortable" data-sort="float">Totaal</th>
<th class="line_tax tips">
Producten BTW Hoog <input type="hidden" class="order-tax-id" name="order_taxes[396]" value="1">
<a class="delete-order-tax" href="#" data-rate_id="396"></a>
</th>
<th class="wc-order-edit-line-item" > </th>
</tr>
</thead>
<tbody id="order_line_items">
<tr class="item " data-order_item_id="393" style="background-color: rgb(255, 255, 255);">
<td class="thumb">
<div class="wc-order-item-thumbnail"><img src="" class="attachment-thumbnail size-thumbnail" loading="lazy" title=""></div>
</td>
<td class="name" data-sort-value="testing (kopie)">
<a href="" class="wc-order-item-name">testing (kopie)</a>
<div class="wc-order-item-sku"><strong>Artikelnummer:</strong> 1234-1</div> <input type="hidden" class="order_item_id" name="order_item_id[]" value="393">
<input type="hidden" name="order_item_tax_class[393]" value="">
<div class="view">
</div>
<div class="edit" style="display: none;">
<table class="meta" cellspacing="0">
<tbody class="meta_items">
</tbody>
<tfoot>
<tr>
<td colspan="4"><button class="add_order_item_meta button">Meta toevoegen</button></td>
</tr>
</tfoot>
</table>
</div>
</td>
<td></td>
<td class="cart_quantity">
<input type="button" value="-" class="qtyminus" field="quantity">
<input type="text" name="quantity" id="quantity" value="0" class="qty">
<input type="button" value="+" id="qtyplus" class="qtyplus" field="quantity">
</td>
<td id="hoeveelheid" class="hoeveelheid">1</td>
<td class="item_cost" data-sort-value="1836.36">
<div class="view">
<span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">€</span>1.836,36</bdi>
</span>
</div>
</td>
<td class="quantity" >
<div class="view">
<small class="times">×</small> 1 </div>
<div class="edit" style="display: none;">
<input type="number" step="1" min="0" autocomplete="off" name="order_item_qty[393]" placeholder="0" value="1" data-qty="1" size="4" class="quantity">
</div>
<div class="refund" style="display: none;">
<input type="number" step="1" min="0" max="1" autocomplete="off" name="refund_order_item_qty[393]" placeholder="0" size="4" class="refund_order_item_qty">
</div>
</td>
<td class="line_cost" data-sort-value="1836.363636">
<div class="view">
<span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">€</span>1.836,36</bdi>
</span>
</div>
<div class="edit" style="display: none;">
<div class="split-input">
<div class="input">
<label>Vóór korting</label>
<input type="text" name="line_subtotal[393]" placeholder="0" value="1836,363636" class="line_subtotal wc_input_price" data-subtotal="1836,363636">
</div>
<div class="input">
<label>Totaal</label>
<input type="text" name="line_total[393]" placeholder="0" value="1836,363636" class="line_total wc_input_price" data-tip="Nadat kortingen vóór belastingheffing toegepast worden" data-total="1836,363636">
</div>
</div>
</div>
<div class="refund" style="display: none;">
<input type="text" name="refund_line_total[393]" placeholder="0" class="refund_line_total wc_input_price">
</div>
</td>
<td class="line_tax" >
<div class="view">
<span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">€</span>385,64</bdi>
</span>
</div>
<div class="edit" style="display: none;">
<div class="split-input">
<div class="input">
<label>Vóór korting</label>
<input type="text" name="line_subtotal_tax[393][1]" placeholder="0" value="385,64" class="line_subtotal_tax wc_input_price" data-subtotal_tax="385,64" data-tax_id="1">
</div>
<div class="input">
<label>Totaal</label>
<input type="text" name="line_tax[393][1]" placeholder="0" value="385,64" class="line_tax wc_input_price" data-total_tax="385,64" data-tax_id="1">
</div>
</div>
</div>
<div class="refund" style="display: none;">
<input type="text" name="refund_line_tax[393][1]" placeholder="0" class="refund_line_tax wc_input_price" data-tax_id="1">
</div>
</td>
<td class="wc-order-edit-line-item" >
<div class="wc-order-edit-line-item-actions">
<a class="edit-order-item tips" href="#"></a>
<a class="delete-order-item tips" href="#"></a>
</div>
</td>
</tr>
<tr class="item " data-order_item_id="394" style="background-color: rgb(255, 255, 255);">
<td class="thumb">
<div class="wc-order-item-thumbnail"><img src="" class="attachment-thumbnail size-thumbnail" loading="lazy" title=""></div>
</td>
<td class="name" data-sort-value="testing">
<a href="" class="wc-order-item-name">testing</a>
<div class="wc-order-item-sku"><strong>Artikelnummer:</strong> 1234</div> <input type="hidden" class="order_item_id" name="order_item_id[]" value="394">
<input type="hidden" name="order_item_tax_class[394]" value="">
<div class="view">
</div>
<div class="edit" style="display: none;">
<table class="meta" cellspacing="0">
<tbody class="meta_items">
</tbody>
<tfoot>
<tr>
<td colspan="4"><button class="add_order_item_meta button">Meta toevoegen</button></td>
</tr>
</tfoot>
</table>
</div>
</td>
<td></td>
<td class="cart_quantity">
<input type="button" value="-" class="qtyminus" field="quantity">
<input type="text" name="quantity" id="quantity" value="0" class="qty">
<input type="button" value="+" id="qtyplus" class="qtyplus" field="quantity">
</td>
<td id="hoeveelheid" class="hoeveelheid">1</td>
<td class="item_cost" data-sort-value="1836.36">
<div class="view">
<span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">€</span>1.836,36</bdi>
</span>
</div>
</td>
<td class="quantity" >
<div class="view">
<small class="times">×</small> 1 </div>
<div class="edit" style="display: none;">
<input type="number" step="1" min="0" autocomplete="off" name="order_item_qty[394]" placeholder="0" value="1" data-qty="1" size="4" class="quantity">
</div>
<div class="refund" style="display: none;">
<input type="number" step="1" min="0" max="1" autocomplete="off" name="refund_order_item_qty[394]" placeholder="0" size="4" class="refund_order_item_qty">
</div>
</td>
<td class="line_cost" data-sort-value="1836.363636">
<div class="view">
<span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">€</span>1.836,36</bdi>
</span>
</div>
<div class="edit" style="display: none;">
<div class="split-input">
<div class="input">
<label>Vóór korting</label>
<input type="text" name="line_subtotal[394]" placeholder="0" value="1836,363636" class="line_subtotal wc_input_price" data-subtotal="1836,363636">
</div>
<div class="input">
<label>Totaal</label>
<input type="text" name="line_total[394]" placeholder="0" value="1836,363636" class="line_total wc_input_price" data-tip="Nadat kortingen vóór belastingheffing toegepast worden" data-total="1836,363636">
</div>
</div>
</div>
<div class="refund" style="display: none;">
<input type="text" name="refund_line_total[394]" placeholder="0" class="refund_line_total wc_input_price">
</div>
</td>
<td class="line_tax" >
<div class="view">
<span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">€</span>385,64</bdi>
</span>
</div>
<div class="edit" style="display: none;">
<div class="split-input">
<div class="input">
<label>Vóór korting</label>
<input type="text" name="line_subtotal_tax[394][1]" placeholder="0" value="385,64" class="line_subtotal_tax wc_input_price" data-subtotal_tax="385,64" data-tax_id="1">
</div>
<div class="input">
<label>Totaal</label>
<input type="text" name="line_tax[394][1]" placeholder="0" value="385,64" class="line_tax wc_input_price" data-total_tax="385,64" data-tax_id="1">
</div>
</div>
</div>
<div class="refund" style="display: none;">
<input type="text" name="refund_line_tax[394][1]" placeholder="0" class="refund_line_tax wc_input_price" data-tax_id="1">
</div>
</td>
<td class="wc-order-edit-line-item" >
<div class="wc-order-edit-line-item-actions">
<a class="edit-order-item tips" href="#"></a>
<a class="delete-order-item tips" href="#"></a>
</div>
</td>
</tr>
</tbody>
<tbody id="order_fee_line_items">
</tbody>
<tbody id="order_shipping_line_items">
<tr class="shipping " data-order_item_id="395">
<td class="thumb">
<div></div>
</td>
<td class="name">
<div class="view">
Thuis bezorgen </div>
<div class="edit" style="display: none;">
<input type="hidden" name="shipping_method_id[]" value="395">
<input type="text" class="shipping_method_name" placeholder="Verzendnaam" name="shipping_method_title[395]" value="Thuis bezorgen">
<select class="shipping_method" name="shipping_method[395]">
<optgroup label="Verzendmethode">
<option value="">Niet beschikbaar</option>
<option value="flat_rate">Vast Tarief</option>
<option value="free_shipping">Gratis verzending</option>
<option value="local_pickup">Afhalen</option>
<option value="dhlpwc" selected="selected">DHL in WooCommerce</option>
<option value="other">Anders</option>
</optgroup>
</select>
</div>
<div class="view">
<table cellspacing="0" class="display_meta">
<tbody>
<tr>
<th>sort_position:</th>
<td>
<p>1</p>
</td>
</tr>
</tbody>
</table>
</div>
<div class="edit" style="display: none;">
<table class="meta" cellspacing="0">
<tbody class="meta_items">
<tr data-meta_id="2887">
<td>
<input type="text" maxlength="255" placeholder="Naam (vereist)" name="meta_key[395][2887]" value="sort_position">
<textarea placeholder="Waarde (vereist)" name="meta_value[395][2887]">1</textarea>
</td>
<td ><button class="remove_order_item_meta button">×</button></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4"><button class="add_order_item_meta button">Meta toevoegen</button></td>
</tr>
</tfoot>
</table>
</div>
</td>
<td></td>
<td class="cart_quantity">
<input type="button" value="-" class="qtyminus" field="quantity">
<input type="text" name="quantity" id="quantity" value="0" class="qty">
<input type="button" value="+" id="qtyplus" class="qtyplus" field="quantity">
</td>
<td id="hoeveelheid" class="hoeveelheid">1</td>
<td class="item_cost" > </td>
<td class="quantity" > </td>
<td class="line_cost" >
<div class="view">
<span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">€</span>0,00</span>
</div>
<div class="edit" style="display: none;">
<input type="text" name="shipping_cost[395]" placeholder="0" value="0,00" class="line_total wc_input_price">
</div>
<div class="refund" style="display: none;">
<input type="text" name="refund_line_total[395]" placeholder="0" class="refund_line_total wc_input_price">
</div>
</td>
<td class="line_tax" >
<div class="view">
– </div>
<div class="edit" style="display: none;">
<input type="text" name="shipping_taxes[395][1]" placeholder="0" value="" class="line_tax wc_input_price">
</div>
<div class="refund" style="display: none;">
<input type="text" name="refund_line_tax[395][1]" placeholder="0" class="refund_line_tax wc_input_price" data-tax_id="1">
</div>
</td>
<td class="wc-order-edit-line-item">
<div class="wc-order-edit-line-item-actions">
<a class="edit-order-item" href="#"></a>
<a class="delete-order-item" href="#"></a>
</div>
</td>
</tr>
</tbody>
<tbody id="order_refunds">
</tbody>
</table>我不知道你对HTML 结构有多少控制权，因为这样我们就可以拥有更干净的HTML 和js 代码。
例如：
你有很多行具有相同的id 这并不常见，
或
您使用此代码var $target = $(this).next('input[name=' + $(this).attr('field') + ']'); 获取数量input 我认为没有必要。你可以使用quantity 而不是+ $(this).attr('field') +
还有这样的例子。
我再说一遍，由于我不知道页面的完整结构，我猜你可能有原因和限制，我尽量不要改变太多，但你可以做得更容易
祝你好运
【讨论】：
非常感谢，现在看起来好多了！我确实无法控制 HTML 部分，但这看起来要好得多，也更合乎逻辑。感谢您的解释，这对我来说是一次学习之旅。以上是关于如果数量相同，则jQuery着色表行的主要内容，如果未能解决你的问题，请参考以下文章