CODEWITHSUNDEEP
jqueryaddclass
yaylitzis
yaylitzis

Reputation: 5534

Add css class in tr under condition

I have a table

<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>

and I want to peform a check, if the value of the column item price is under 100 add class="warning in the tr. 

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

How can I do this with jquery I don't know much about jquery and my try till now is unsuccessful. 

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

Upvotes: 1

Views: 2431

Answers (3)

Pranav C Balan
Pranav C Balan

Reputation: 115212

You can use filter() here,

filter() : For each element, if the function returns true (or a "truthy" value), the element will be included in the filtered set; otherwise, it will be excluded. ( Taken from 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>

Upvotes: 2

fdomn-m
fdomn-m

Reputation: 28611

Your best bet is a little bit of coding, rather than trying to find some obscure or custom selector:

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

Personally, I'd make this more maintainable than rely on column ordering by adding a class (the name doesn't matter):

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

then:

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

Edit: Added the .substr(1) as .text() will give the value including "$" then *1 to get it as a number. You could instead use parse int and remember to set it to base 10.

Upvotes: 0

Sean Wessell
Sean Wessell

Reputation: 3510

Use filter:

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

You also need regex to strip the currency from the number.

Then grab the closest TR and apply class.

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');

Upvotes: 0

Related Questions