CODEWITHSUNDEEP
jqueryhtmlcss
amicoderozer
amicoderozer

Reputation: 2144

Jquery add css class to the first row of a table

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.

Upvotes: 3

Views: 18656

Answers (5)

user7300841
user7300841

Reputation:

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

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

Upvotes: 0

zer00ne
zer00ne

Reputation: 43870

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>

Upvotes: 1

Himanshu Vaghela
Himanshu Vaghela

Reputation: 1119

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>

Upvotes: 1

Pratik Deshmukh
Pratik Deshmukh

Reputation: 308

Try this :

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

Upvotes: 1

Alexis
Alexis

Reputation: 5831

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>

Upvotes: 6

Related Questions