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>

Answer 2

Это то, что вы ищете?Я сделал подсветку, используя jquery ui "highlight" эффект с тайм-аутом 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>