Jquery add css class to the first row of a table

Question

I am trying to add a css class to the first tr of a table using jquery. I know this should be super easy, I found a lot of links and questions that provide correct solutions. Like these three and others:

How to get the id of first <tr> of <tbody> in HTML table using jQuery?

JQuery, select first row of table

How do I style the first row of every table on the page using jQuery

But for me none of these works.

I have a table with id DataTableMovimenti and I want to apply the css class "ct-active"

I tried the following instructions:

$("#DataTableMovimenti tr:first").addClass('ct-active');
$("#DataTableMovimenti").find("tr:first-children").addClass("ct-active");
$("#DataTableMovimenti").find("tr:first").addClass("ct-active");
$("#DataTableMovimenti").find("tr:eq(0)").addClass("ct-active");
$("#DataTableMovimenti").find("tbody tr:eq(0)").addClass("ct-active");
$("#DataTableMovimenti").children("tr:first").addClass("ct-active");
$("#DataTableMovimenti").closest('tr').addClass('ct-active');

I inserted the code in the $document.ready() function in my jsp, because I want highlight the first row of the table when I enter the page.

The table have this structure:

<table id="DataTableMovimenti" class="table ct-datatables">
<thead>
   <tr></tr>
      ............
</thead>
<tbody>
    <tr id="tableRowId" class="table-row-tr"></tr>
      ...........
</tbody>
</table>

I want to change the css class of the first tr in the tbody section.

Your first line should work fine - although CSS would be a better option. Have you checked the console for errors, and are you running your code in a DOMReady handler? — Rory McCrossan, Jul 06 '16 at 09:51
`$("#DataTableMovimenti tbody > tr:first-child").addClass('ct-active');` — Huelfe, Jul 06 '16 at 09:52
You can directly use CSS to do that `#DataTableMovimenti tr:first-child` — Pugazh, Jul 06 '16 at 09:54
@Pugazh your suggestion might work if the class being added is ONLY for the purpose of styling. A classname might also be used for other purposes. — Ifedi Okonkwo, Jul 06 '16 at 09:56
I know one of the lines i tried should work, as @Huelfe solution, but i don't know why they doesn't. And i haven't error in console. I accepted the css solution. That worked well! Thank you all — amicoderozer, Jul 06 '16 at 10:14

score 6 · Accepted Answer · answered Jul 06 '16 at 09:57

Add tbody in your selector.

$("#DataTableMovimenti tbody tr:first").addClass('ct-active');

.ct-active{
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="DataTableMovimenti">
  <thead>
    <tr>
      <td>First thead</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>First tbody</td>
    </tr>
     <tr>
       <td>Second tbody</td>
     </tr>
  </tbody>
</table>

It's better to do that with css.

#DataTableMovimenti tbody > tr:first-child {
  color:red;
 }

    <table id="DataTableMovimenti">
      <thead>
        <tr>
          <td>First thead</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>First tbody</td>
        </tr>
        <tr>
          <td>Second tbody</td>
        </tr>
      </tbody>
    </table>

thank you @Alexis your css solution works for me. It's really strange because none of the jquery solutions, that i know are correct, works for me. — amicoderozer, Jul 06 '16 at 10:11

score 1 · Answer 2 · answered Jul 06 '16 at 09:59

1

Try this :

$('#DataTableMovimenti tbody tr:first-child').addClass('ct-active');

answered Jul 06 '16 at 09:59

Pratik Deshmukh

308
5
16

Himanshu Vaghela · Answer 3 · 2016-07-06T10:09:16.917

The :first pseudo-class is equivalent to :eq( 0 ). It could also be written as :lt( 1 ). While this matches only a single element, :first-child can match more than one: One for each parent.

Additional Notes:

Because :first is a jQuery extension and not part of the CSS specification, queries using :first cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. To achieve the best performance when using :first to select elements, first select the elements using a pure CSS selector, then use .filter(":first"). Selected elements are in the order of their appearance in the document.For example:

$("table tr:first").addClass('yourclass-name');

Or for a specific table:

$("#myTable tr:first").addClass('yourclass-name');

$("tr:first").addClass("demo-class");

td {
  color: blue;
  font-weight: bold;
}
.demo-class {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>first demo</title>
</head>

<body>

  <table>
    <tr>
      <td>Row 1</td>
    </tr>
    <tr>
      <td>Row 2</td>
    </tr>
    <tr>
      <td>Row 3</td>
    </tr>
  </table>


</body>

</html>

zer00ne · Answer 4 · 2016-07-06T10:11:59.133

There's a jQuery pseudo-selector called :first which is like CSS :first-of-type or :first-child, the difference being that :first will pick only THE first element and not every element that meets a criteria of being the first child of it's parent. BTW, when dealing with tables, it might be best to specify <tbody> in your selector, otherwise you'll end up targeting the <tr> in <thead>.

$(function() {
  $('#DataTableMovimenti tbody tr:first').removeClass("table-row-tr").addClass("table-row-tr-Active");
});

.table-row-tr-Active {
  background: red;
}
table {
  width: 200px;
}
table,
td {
  border: 2px solid grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

<table id="DataTableMovimenti" class="table ct-datatables">
  <thead>
    <tr>
      <td>HEADER</td>
    </tr>

  </thead>
  <tbody>
    <tr id="tableRowId" class="table-row-tr">
      <td>CELL</td>
    </tr>

  </tbody>
</table>

score 0 · Answer 5 · answered Dec 16 '16 at 08:03

0

Best way to do this is to use pseudo-selector :first.

$('#DataTableMovimenti tbody tr:first').addClass('active');

answered Dec 16 '16 at 08:03

Jquery add css class to the first row of a table

5 Answers5