I'm dynamically populating a table. If a certain condition applies, I want to add a class to the current tr:

number = 3;

for (i = 0; i < 5; i++) {
  var row = "";
  row += "<tr><td>Test" + i + "</td></tr>"

  $('#mytable').find('tbody:last').append(row);

  if (i == number) {
    $('#mytable').find('tbody:last').addClass("red");
  }
}

Unfortunately, the class is being added to all trs, not only the one of them.

Here is a fiddle.

I'm dynamically populating a table. If a certain condition applies, I want to add a class to the current tr:

number = 3;

for (i = 0; i < 5; i++) {
  var row = "";
  row += "<tr><td>Test" + i + "</td></tr>"

  $('#mytable').find('tbody:last').append(row);

  if (i == number) {
    $('#mytable').find('tbody:last').addClass("red");
  }
}

Unfortunately, the class is being added to all trs, not only the one of them.

Here is a fiddle.

• javascript
• jquery
• css

• 1 "tbody:last" finds the last <tbody> element, not the last <tr>. – Pointy Commented Apr 8, 2016 at 13:57
• $('#mytable').find('tbody tr:last').addClass("red"); – Benjamin Poignant Commented Apr 8, 2016 at 13:58

7 Answers 7

You can use .eq() or :eq() selector

$('#mytable tbody tr').eq(number).addClass('red');

Fiddle Demo

Note that the index provided to eq() is zero-based. Thus passing 3 will select the fourth element.

The counter in the loop i can also be used with conditional operator

row += "<tr" + (i === number ? ' class="red"' : '') + "><td>Test" + i + "</td></tr>"
//              ^^ ================================ ^^

Fiddle Demo

I would try this:

number = 3;    
for (i = 0; i < 5; i++) {
  var row = $('<tr>');
  if (i == number) row.addClass('red');
  row.append($('<td>').html('Test'+i));
  $('#mytable').find('tbody:last').append(row);
}

Create the row as a jQuery object so you have a reference to it. Then you can simply add a class to it if your clause is met rather than having to find it again.

EG:

var number = 3;
var $tbody = $('#mytable');
for (i = 0; i < 5; i++) {    
    var $row = $("<tr><td>Test"+i+"</td></tr>");// create the row as a jquery object so we have a reference to it    
    $tbody.append($row);// append it to the table   
    if (i == number) {// if your clause is met
        $row.addClass("red");// add a classname
    }
}

.red {color:red;}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable">
</table>

$('#mytable tbody:last tr:last').addClass("red");

This will select last tr and adds class only to last tr(which you just appended)

No need to modify more on this just replace one thing find('tbody tr:last'), please find code below

number = 3;

for (i = 0; i < 5; i++) {
 var row = "";
 row += "<tr><td>Test" + i + "</td></tr>"

 $('#mytable').find('tbody:last').append(row);

 if (i == number) {
   $('#mytable').find('tbody tr:last').addClass("red");
 }
}

You could avoid using addClass() altogether by adding a class directly when constructing the HTML:

for (i = 0; i < 5; i++) {
  var row = "";
  var rowClass = (i == number) ? " class='red' " : "";
  row += "<tr"+rowClass+"><td>Test" + i + "</td></tr>"

  $('#mytable').find('tbody:last').append(row);
}

https://jsfiddle/0k9fazum/

Otherwise as Pointy has pointed out you should select tr not tbody and Tushar's answer demonstrates how you can select specific tr via indices when :latest won't help.

Problem: $('#mytable').find('tbody:last').addClass("red");
Solution : $('#mytable').find('tbody tr:last').addClass("red");

 number = 3;

    for (i = 0; i < 5; i++) {
      var row = "";
      row += "<tr><td>Test" + i + "</td></tr>"

      $('#mytable').find('tbody:last').append(row);

      if (i == number) {  
        $('#mytable').find('tbody tr:last').addClass("red");
      }
    }

https://jsfiddle/shadiq_aust/Lan0fv36/4/