javascript - jQuery 根据单元格值突出显示背景

Question

一条有新旧价格值的记录，如果新价格与旧价格不同，则突出记录。

我想使用“setTimeout”函数，高亮效果会在10秒后消失。如何根据值突出显示表格行？

我使用 jQuery-UI 框架。

$(function(){
   setTimeout(change(), 3000);   
});

function change(){
  $(".table-striped").find("tr").each(function () {
    $("td").filter(function() {
      return $(this).text().indexOf("200") != -1;
    }).parent().toggleClass("highlight",5000).removeClass("highlight");
  });
}

<table class="table table-striped">
   <thead>
     <tr>
       <th>New Price</th>
       <th>Old Price</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>200</td>
       <td>1000</td>
     </tr>
     <tr>
       <td>1000</td>
       <td>1000</td>
     </tr>
   </tbody>
</table>

.highlight {
       background: red !important;
       color: green !important;
   }

Answer 1

我已经用 jquery 解决了你的问题，请检查我的答案。

$(document).ready(function(){
  $('tbody tr').each(function( i, val){
    var nprice = $(this).children('.new_price').html();
    var oprice = $(this).children('.old_price').html();
    
    if(nprice != oprice){
      $(this).addClass('divtoBlink');
      //$(this).children('td').css('background-color','red');
    }
  });
  
  setInterval(function () {
      $(".divtoBlink").css("background-color", function () {
          this.switch = !this.switch
          return this.switch ? "red" : ""
      });
  }, 100);
  
  setInterval(function () {
      $('tr').removeClass('divtoBlink').css('background-color','white');
  }, 5000)

});

.divtoBlink {
    width:100px;
    height:20px;
    background-color:#627BAE;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-striped">
    <thead>
        <tr>
            <th class="text-center">Id#</th>
            <th>Session Eamil</th>
            <th>Login Url</th>
            <th>Date</th>
            <th>Status</th>
            <th>New Price</th>
            <th>Old Price</th>

        </tr>
    </thead>
    <tbody>
                <tr>
                    <td class="text-center">@counter11</td>
                    <td>@item.SessionEmail11</td>
                    <td>@item.LoginUrl11</td>
                    <td>@item.CreatedAt11</td>
                    <td>Failed11</td>
                    <td class="new_price">200</td>
                   <td class="old_price">1000</td>
            
                </tr>
                <tr>
                    <td class="text-center">@counter12</td>
                    <td>@item.SessionEmail12</td>
                    <td>@item.LoginUrl12</td>
                    <td>@item.CreatedAt12</td>
                    <td>Failed12</td>
                    <td class="new_price">1000</td>
                    <td class="old_price">1000</td>
               
                </tr>
           </tbody>
</table>