Question 160837 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Can jQuery style the last column of fixed columns on a datatable?

I have an issue where I want to create a shadow next to set of fixed columns to indicate that there is something under it. The fixed columns have a class dtfc-fixed-left added by the FixedColumns library in DataTables. The amount of fixed columns in this case can range from 0-2 set by the datatables colvis functionality.

The structure of the table is this:

<table>
  <thead>
    <tr>
      <th class="dtfc-fixed-left">Column 1</th>
      <th class="dtfc-fixed-left">Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="dtfc-fixed-left">test data 1</td>
      <td class="dtfc-fixed-left">test data 2</td>
      <td>test data 3</td>
    </tr>
    <tr>
        <td class="dtfc-fixed-left">test data 4</td>
        <td class="dtfc-fixed-left">test data 5</td>
        <td>test data 6</td>
    </tr>
    <tr>
      <td class="dtfc-fixed-left">test data 7</td>
      <td class="dtfc-fixed-left">test data 8</td>
      <td>test data 9</td>
    </tr>
  </tbody>
</table>

And the css selector and some test styling data I tried to use was:

td.dtfc-fixed-left:last-child {
   background: red !important;
}

But that didn’t work, I’d like to avoid hardcoding the styling logic with JS but I will do it if this isn’t possible.

I would like to find a selector which always finds the last occurance of the class dtfc-fixed-left within each <tr>

Tags:

2

Answers


  1. 0

    You can not apply last-child in the class.
    you can refer here

    .dtfc-fixed-left:nth-last-child(2) {
   background: red !important;
}
    <table>
  <thead>
    <tr>
      <th class="dtfc-fixed-left">Column 1</th>
      <th class="dtfc-fixed-left">Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="dtfc-fixed-left">test data 1</td>
      <td class="dtfc-fixed-left">test data 2</td>
      <td>test data 3</td>
    </tr>
    <tr>
        <td class="dtfc-fixed-left">test data 4</td>
        <td class="dtfc-fixed-left">test data 5</td>
        <td>test data 6</td>
    </tr>
    <tr>
      <td class="dtfc-fixed-left">test data 7</td>
      <td class="dtfc-fixed-left">test data 8</td>
      <td>test data 9</td>
    </tr>
  </tbody>
</table>
    Login or Signup to reply.
  2. 0

    The thing that characterises that td is that is has no following sibling of the same class.

    For most of the major browser :has is implemented:

      td.dtfc-fixed-left:not(:has(~.dtfc-fixed-left)) {
    background: red;
  }

    [However, note that on Firefox a flag has to be set].

    <style>
  td.dtfc-fixed-left:not(:has(~.dtfc-fixed-left)) {
    background: red;
  }
</style>
<table>
  <thead>
    <tr>
      <th class="dtfc-fixed-left">Column 1</th>
      <th class="dtfc-fixed-left">Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="dtfc-fixed-left">test data 1</td>
      <td class="dtfc-fixed-left">test data 2</td>
      <td>test data 3</td>
    </tr>
    <tr>
      <td class="dtfc-fixed-left">test data 4</td>
      <td class="dtfc-fixed-left">test data 5</td>
      <td>test data 6</td>
    </tr>
    <tr>
      <td class="dtfc-fixed-left">test data 7</td>
      <td class="dtfc-fixed-left">test data 8</td>
      <td>test data 9</td>
    </tr>
  </tbody>
</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search