基于相同值属性检查时如何更改表行类

Question

我们在一些订单上有多个订单项，而另一些订单只有一个。我只想要一个类似订单号的复选框。选中该框后，我需要突出显示具有该订单号的每一行。当然，订单号总是不同的。我正在做的是将 td 中的订单号作为每个相似行的值。订单号也是复选框输入的值。因此，如果我选中 1000002 复选框，它将突出显示相同订单号的两行。我是 jQuery 的新手，我发现一些 jquery 突出显示了最近的列，但我知道这必须进行很多更改才能让它完成我需要的操作。

<tr class="danger"  value="1000005">
    <td><input name="checkOrder[1000005][ord_no]" value=" 1000005" type="checkbox" class="checkOrder" id="checkOrder"></td>

    <td>   1000005 </td>
    <td>  65734COM </td>
    <td> dummy product1</td>
    <td>$565.00</td>

    <td>$0 </td>
    <td>$565</td></tr>


<tr class="danger" value="1000002">
    <td><input name="checkOrder[1000002][ord_no]" value=" 1000002" type="checkbox" class="checkOrder" id="checkOrder"></td>

    <td>   1000002 </td>
    <td>  54354534 </td>
    <td> dummy product2</td>
    <td>$900.00</td>

    <td>$1080.46 </td>
    <td>$-180.46</td></tr>

<tr class="danger" value="1000002">
    <td></td>
    <td> 1000002</td>
    <td>  087373 </td>
    <td> dummy product3</td>
    <td>$750.00</td>
    <td>$919.00 </td>
    <td>$-169</td></tr>

我的 jQuery

 $("input[type='checkbox']").change(function(e) {
            var myName = $(this).attr("value");
            if($(this).is(":checked")){
                if(myName == )
                $(this).closest('tr').addClass("primary");
                $(this).closest('tr').removeClass("danger");

            }
            else{
                $(this).closest('tr').removeClass("primary");
                $(this).closest('tr').addClass("danger");

            }
        });

Answer 1

您应该寻找最近的 tr（行），而不是最近的 td（列）。

使用$(this).closest('tr').addClass("highlight");

另外，您需要先找到需要更改的行：

获取订单号

var ordernum = $(this).closest('tr').find('td:nth-child(2)').attr('value');

然后查找表中所有具有相同订单号的行

$('table td[value="' + ordernum + '"]').each(function(i, v) {
    $(v).closest('tr').addClass('danger');
});

$(function() {

  $('.checkOrder').click(function() {
    var ordernum = $(this).closest('tr').find('td:nth-child(2)').attr('value');
    if ($(this).is(':checked')) {
      $('table td[value="' + ordernum + '"]').each(function(i, v) {
        $(v).closest('tr').addClass('danger');
      });
    } else {
      $('table td[value="' + ordernum + '"]').each(function(i, v) {
        $(v).closest('tr').removeClass('danger');
      });
    }
  });

});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
  <tbody>
    <tr>
      <td>
        <input name="checkOrder[1000005][ord_no]" value=" 1000005" type="checkbox" class="checkOrder" id="checkOrder">
      </td>
      <td value="1000005">1000005</td>
      <td>65734COM</td>
      <td>dummy product1</td>
      <td>$565.00</td>

      <td>$0</td>
      <td>$565</td>
    </tr>
    <tr>
      <td>
        <input name="checkOrder[1000002][ord_no]" value=" 1000002" type="checkbox" class="checkOrder" id="checkOrder">
      </td>
      <td value="1000002">1000002</td>
      <td>54354534</td>
      <td>dummy product2</td>
      <td>$900.00</td>
      <td>$1080.46</td>
      <td>$-180.46</td>
    </tr>
    <tr>
      <td value="1000002"></td>
      <td>1000002</td>
      <td>087373</td>
      <td>dummy product3</td>
      <td>$750.00</td>
      <td>$919.00</td>
      <td>$-169</td>
    </tr>
  </tbody>
</table>