jQuery基于单元格值突出显示背景

Question

新旧价格记录， 如果新价格与旧价格不同，则突出显示记录。

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

我使用 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>

Answer 2

这就是你要找的吗？我使用 jquery ui 的“highlight”effect 使其突出显示，超时时间为 10 秒，如您所愿。

代码如下：

$(function(){
    var elementToHighlight = '';
$(".table-striped tbody tr").each(function(i, el) {
	if ($(el).children(':first').html() != $(el).children(':last').html()) {
		if (i == $(".table-striped tbody tr").length - 1) {
			elementToHighlight += '.table-striped tbody > :eq(' + $(el).children(':first').parent().index() + ')';
        } else {
            elementToHighlight += '.table-striped tbody > :eq(' + $(el).children(':first').parent().index() + '), ';
        }
	}	
});   
   if (elementToHighlight.substr(-2) == ', ') {
    elementToHighlight = elementToHighlight.substr(0, elementToHighlight.length-2)
   }
   var blink = setInterval(function(){
      	$(elementToHighlight).effect('highlight', {color: 'red'}, 1000);
      }, 1000);
		setTimeout(function() {
    	clearInterval(blink);
    }, 10000);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<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>
     <tr>
       <td>400</td>
       <td>1000</td>
     </tr>
      <tr>
       <td>500</td>
       <td>500</td>
     </tr>
     <tr>
       <td>700</td>
       <td>700</td>
     </tr>
     <tr>
       <td>200</td>
       <td>900</td>
     </tr>
   </tbody>
</table>