Добавить класс CSS в тр при условии

Question

У меня есть таблица

<div class="container"> 
    <div class="row"> 
     <table id="mytable"> 
     <thead> 
      <tr> 
       <th>Item ID</th> 
       <th>Item Name</th> 
       <th>Item Price</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>1</td> 
       <td>Item 1</td> 
       <td>$99</td> 
      </tr> 
      <tr> 
       <td>2</td> 
       <td>Item 2</td> 
       <td>$200</td> 
      </tr> 
     </tbody> 
     </table> 
    </div> 
</div> 

и я хочу peform чек, если значение цены на колонке под 100 добавить class="warning в тр.

<tr class="warning"> 
<td>1</td> 
<td>Item 1</td> 
<td>$99</td> 
</tr> 

Как я могу сделать это с помощью JQuery я не знаю много о JQuery и мой try до сих пор безуспешны.

$('#mytable tr/* how i check here <100*/ ').addClass('warning'); 

Answer 1

Вы можете использовать filter() здесь,

filter(): Для каждого элемента, если функция возвращает истину (или "truthy" значение), то элемент будет включен в фильтрованный набор; в противном случае он будет исключен. (Из http://api.jquery.com/filter/)

$('tbody tr').filter(function() { 
 
    return $('td:eq(2)', this) 
 
    // get 3rd column using :eq(), :nth-child , :last or :last-child 
 
    .text() 
 
    // get text content 
 
    .substr(1) * 1 < 100; 
 
    // get number value from string by avoiding $ and compare 
 
    // if it includes , then use txt.replace(/[,$]/g,'') 
 
    // use parseInt(txt,10) for converting to integer 
 
}).addClass('warning');

.warning { 
 
    color: red 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <table id="mytable"> 
 
     <thead> 
 
     <tr> 
 
      <th>Item ID</th> 
 
      <th>Item Name</th> 
 
      <th>Item Price</th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     <tr> 
 
      <td>1</td> 
 
      <td>Item 1</td> 
 
      <td>$99</td> 
 
     </tr> 
 
     <tr> 
 
      <td>2</td> 
 
      <td>Item 2</td> 
 
      <td>$200</td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    </div> 
 
</div>

Answer 2

Лучше всего немного кодирования, а не пытаться найти какой-то неясной или пользовательский селектор:

$("#mytable tr").each(function() { 
    var val = $("td", this)[2].text().substr(1) * 1; 
    if (val < 100) 
     $(this).addClass("warning"); 
}); 

Лично Я бы сделал это более удобным, чем полагаться на упорядочение столбцов, добавив класс (имя не имеет значения):

<tr> 
    <td>1</td> 
    <td>Item 1</td> 
    <td class='data-value'>$99</td> 
</tr> 

затем:

$("#mytable tr").each(function() { 
    var val = $("td.data-value", this).text().substr(1) * 1; 
    if (val < 100) 
     $(this).addClass("warning"); 
}); 

Edit: Добавлена ​​.substr(1), как .text() даст значение, включая "$", то *1, чтобы получить его как число. Можно использовать вместо разбора Int и помнить, чтобы установить его на базу 10.

Answer 3

Используйте фильтр:

http://api.jquery.com/filter/

Кроме того, необходимо регулярное выражение, чтобы лишить валюту из числа.

Затем захватите ближайший TR и примените класс.

http://jsfiddle.net/SeanWessell/g6uz2Lfx/

$('#mytable tr td:nth-child(3)').filter(function() { 
    var amt = parseFloat($(this).text().replace(/[$,]+/g, "")); 
    return (amt < 100); 
}).closest('tr').addClass('warning');