Question

首先是我的表结构

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table group-9569" width="100%">
  <tbody>
    <tr>
      <td class="order_id"  width="10%"><span class="orderId">9569</span></td>
      <td class="order_date"  width="13%">
        <span >2016-04-14 17:39:00</span>
      </td>
      <td class="order_name"  width="10%"><span >John Smith</span></td>
      <td class="order_paid"  width="5%">
        <span  class="total-cost-9569">￥81.28</span>
      </td>
      <td class="order_shipping"  width="13%">Shipping</td>
      <td class="order_status"  width="10%">
        <span  class="order-status-9569">Paid</span>
      </td>
      <td class="order_tracking"  width="10%"></td>
      <td class="new-msg-img-9569">
      </td>
    </tr>
  </tbody>
</table>

<table class="table group-9564" width="100%">
  <tbody>
    <tr>
      <td class="order_id"  width="10%"><span class="orderId">9564</span></td>
      <td class="order_date"  width="13%">
        <span >2016-04-14 17:24:10</span>
      </td>
      <td class="order_name"  width="10%"><span >Jane smith</span></td>
      <td class="order_paid"  width="5%">
        <span  class="total-cost-9568">￥109.69</span>
      </td>
      <td class="order_shipping"  width="13%">Shipping</td>
      <td class="order_status"  width="10%">
        <span  class="order-status-9568">Paid</span>
      </td>
      <td class="order_tracking"  width="10%"></td>
      <td class="new-msg-img-9568">
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

我的orderId每个订单增加一个我想要实现的目标是使用jquery将数字定位为仅检测最后一个数字，然后检测if 0-4 else 5-9数字范围，然后相应地将此行设置为红色或绿色。

我知道可以将它转换为类似的javascript编号，但我想知道它是否只是通过将其变为数字来使事情变得更复杂。

var number = parseInt($('.orderId').text(), 10);
alert(number)

问题是当我每行只需要它们时会得到每个订单。

解决此问题的最佳方法是什么？如何将每一行独立区分为最终数字样式？

Answer 1

只需对元素列表进行分区，例如：

＆＃13;

var
    // all candidates
    $all = $('.orderId'),
    
    // first set
    $_04 = $all.filter(function (i, el) {
        // check criteria
        return -1 < ['0', '1', '2', '3', '4'].indexOf(el.innerText.substr(-1))
    }),
    
    // all except first set
    $_59 = $all.not($_04)
;

// do stuff with both sets
$_04.closest('tr').css('background', 'red');
$_59.closest('tr').css('background', 'green');

＆＃13;

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-2.2.3.min.js"></script>
<table class="table group-9569" width="100%">
    <tbody>
    <tr>
        <td class="order_id"  width="10%"><span class="orderId">9569</span></td>
        <td class="order_date"  width="13%">
            <span >2016-04-14 17:39:00</span>
        </td>
        <td class="order_name"  width="10%"><span >John Smith</span></td>
        <td class="order_paid"  width="5%">
            <span  class="total-cost-9569">￥81.28</span>
        </td>
        <td class="order_shipping"  width="13%">Shipping</td>
        <td class="order_status"  width="10%">
            <span  class="order-status-9569">Paid</span>
        </td>
        <td class="order_tracking"  width="10%"></td>
        <td class="new-msg-img-9569">
        </td>
    </tr>
    </tbody>
</table>

<table class="table group-9564" width="100%">
    <tbody>
    <tr>
        <td class="order_id"  width="10%"><span class="orderId">9564</span></td>
        <td class="order_date"  width="13%">
            <span >2016-04-14 17:24:10</span>
        </td>
        <td class="order_name"  width="10%"><span >Jane smith</span></td>
        <td class="order_paid"  width="5%">
            <span  class="total-cost-9568">￥109.69</span>
        </td>
        <td class="order_shipping"  width="13%">Shipping</td>
        <td class="order_status"  width="10%">
            <span  class="order-status-9568">Paid</span>
        </td>
        <td class="order_tracking"  width="10%"></td>
        <td class="new-msg-img-9568">
        </td>
    </tr>
    </tbody>
</table>

＆＃13;

或者：

$('.orderId').each(function (i, el) {
    $(el).closest('tr').css('background', -1 < ['0', '1', '2', '3', '4'].indexOf(el.innerText.substr(-1))
        ? 'red'
        : 'green'
    );
});

如果您以后不需要这些套装。

Answer 2

您可以使用正则表达式/[\d]{1}$/来获取orderid的最后一位数字

var elements = document.getElementsByClassName("orderId");
var regex = new RegExp(/[\d]{1}$/);

for(var i=0; i<elements.length; i++) {
   var number = element[i].innerHTML;
   var match = regex.exec(number);
   element.setAttribute('class','class'+match[0]);
   alert('Last digit is: ' + match[0]);
}

您可以相应地为每个号码和名称定义不同的css类，我使用class1等。

Answer 3

如果稍微修改HTML结构，您还可以使用纯CSS实现结果，使用属性选择器（更具体地说是[attribute$="value"]）来选择以该值结尾的元素。您需要添加一个描述order-id到<tr>元素的属性 - 因为您无法通过选择子元素<tr>来设置整个<td>的样式。您还可以在class属性中添加order-id，但如果<tr>有多个类，则可能会中断。

对于这个html：

<table class="table" width="100%">
  <tbody>
    <tr data-order-id="9569">
      <td class="order_id"  width="10%"><span class="orderId">9569</span></td>
      <td class="order_date"  width="13%">
        <span >2016-04-14 17:39:00</span>
      </td>
      <td class="order_name"  width="10%"><span >John Smith</span></td>
      <td class="order_paid"  width="5%">
        <span  class="total-cost-9569">￥81.28</span>
      </td>
      <td class="order_shipping"  width="13%">Shipping</td>
      <td class="order_status"  width="10%">
        <span  class="order-status-9569">Paid</span>
      </td>
      <td class="order_tracking"  width="10%"></td>
      <td class="new-msg-img-9569">
      </td>
    </tr>
    <tr data-order-id="9564">
      <td class="order_id"  width="10%"><span class="orderId">9564</span></td>
      <td class="order_date"  width="13%">
        <span >2016-04-14 17:24:10</span>
      </td>
      <td class="order_name"  width="10%"><span >Jane smith</span></td>
      <td class="order_paid"  width="5%">
        <span  class="total-cost-9568">￥109.69</span>
      </td>
      <td class="order_shipping"  width="13%">Shipping</td>
      <td class="order_status"  width="10%">
        <span  class="order-status-9568">Paid</span>
      </td>
      <td class="order_tracking"  width="10%"></td>
      <td class="new-msg-img-9568">
      </td>
    </tr>
  </tbody>
</table>

这些css规则

tr[data-order-id$="0"],tr[data-order-id$="1"],tr[data-order-id$="2"],tr[data-order-id$="3"],tr[data-order-id$="4"] {
    background-color: red;
}
tr[data-order-id$="5"],tr[data-order-id$="6"],tr[data-order-id$="7"],tr[data-order-id$="8"],tr[data-order-id$="9"] {
    background-color: green;
}

https://jsfiddle.net/j8ngo7kh/

检测结束数字是1-4还是5-9然后样式`this`表格行

3 个答案: