Is there a way to choose columns 2 to 6 of the row that is currently selected

Question

Is there a way to choose columns 2 to 6 of the row that is currently selected

I am looking to create a hover effect for columns 1 through 7 of a row where, when the user hovers over any column within that range, certain styles are applied to all columns in the row except for columns 1 and 7. This means that the background color should change on the current row's columns 2 through 6, while excluding columns 1 and 7:

tbody tr:hover > td:not(:first-child):not(:last-child) {
    cursor: pointer; background-color: rgb(221, 221, 221);
}

In addition, I want to have a similar hover style on columns 1 and 7 as well. To clarify, the desired behavior is as follows:

When the user hovers over row x, column 1, only that single cell should get the hover effect.
Similar to the above point, when the user hovers over row x, column 7, only that single cell should get the hover effect.
If the user hovers over row x, any column from 2-6, then all cells in row x with columns 2 through 6 should receive the hover effect.

css

Answer 1

Answer №1

Here's a straightforward solution as suggested by "Pete": css:

tbody tr:not(:first-child):not(:last-child){
    cursor: pointer;
    background-color: rgb(221, 221, 221);
}

This applies to td elements in every row.

tbody tr td:not(:first-child):not(:last-child){
    cursor: pointer;
    background-color: rgb(221, 221, 221);
}

To achieve this for cells 2 to 6 using a specific class for tds, and regular css for the first child and last child, we can use some jQuery.

$("table.mytable").find('td.a')
  .on( "mouseenter", function() {
  var allaclass = $(this).parent().find('td.a');
    allaclass.css("background-color", "red");
  })
  .on( "mouseleave", function() {
    var allaclass = $(this).parent().find('td.a');
    allaclass.css("background-color", "white");
  });

tbody tr td:first-child:hover,
tbody tr td:last-child:hover{
    cursor: pointer;
    background-color: rgb(221, 221, 221);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table class="mytable"> 
  <tbody>
    <tr>
      <td>1</td>
      <td class="a">2</td>
      <td class="a">3</td>
      <td class="a">4</td>
      <td class="a">5</td>
      <td class="a">6</td>
      <td>7</td>
    </tr>
    <tr>
      <td>1</td>
      <td class="a">2</td>
      <td class="a">3</td>
      <td class="a">4</td>
      <td class="a">5</td>
      <td class="a">6</td>
      <td>7</td>
    </tr>
  </tbody>
</table>

Answer 2

Here's a straightforward solution as suggested by "Pete": css:

tbody tr:not(:first-child):not(:last-child){
    cursor: pointer;
    background-color: rgb(221, 221, 221);
}

This applies to td elements in every row.

tbody tr td:not(:first-child):not(:last-child){
    cursor: pointer;
    background-color: rgb(221, 221, 221);
}

To achieve this for cells 2 to 6 using a specific class for tds, and regular css for the first child and last child, we can use some jQuery.

$("table.mytable").find('td.a')
  .on( "mouseenter", function() {
  var allaclass = $(this).parent().find('td.a');
    allaclass.css("background-color", "red");
  })
  .on( "mouseleave", function() {
    var allaclass = $(this).parent().find('td.a');
    allaclass.css("background-color", "white");
  });

tbody tr td:first-child:hover,
tbody tr td:last-child:hover{
    cursor: pointer;
    background-color: rgb(221, 221, 221);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table class="mytable"> 
  <tbody>
    <tr>
      <td>1</td>
      <td class="a">2</td>
      <td class="a">3</td>
      <td class="a">4</td>
      <td class="a">5</td>
      <td class="a">6</td>
      <td>7</td>
    </tr>
    <tr>
      <td>1</td>
      <td class="a">2</td>
      <td class="a">3</td>
      <td class="a">4</td>
      <td class="a">5</td>
      <td class="a">6</td>
      <td>7</td>
    </tr>
  </tbody>
</table>

Answer 3

Answer №2

Utilize the hover effect on the parent element.

tbody:hover tr:not(:nth-child(1)):not(:nth-child(7)) {
    cursor: pointer;
    background-color: rgb(221, 221, 221);
}

tbody:hover tr:not(:nth-child(1)):not(:nth-child(7)) {
    cursor: pointer;
    background-color: rgb(221, 221, 221);
}

<table>
  <tbody>
    <tr>
      <td>1</td>
    </tr>
    <tr>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
    </tr>
    <tr>
      <td>5</td>
    </tr>
    <tr>
      <td>6</td>
    </tr>
    <tr>
      <td>7</td>
    </tr>
  </tbody>
</table>

Answer 4

Utilize the hover effect on the parent element.

tbody:hover tr:not(:nth-child(1)):not(:nth-child(7)) {
    cursor: pointer;
    background-color: rgb(221, 221, 221);
}

tbody:hover tr:not(:nth-child(1)):not(:nth-child(7)) {
    cursor: pointer;
    background-color: rgb(221, 221, 221);
}

<table>
  <tbody>
    <tr>
      <td>1</td>
    </tr>
    <tr>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
    </tr>
    <tr>
      <td>5</td>
    </tr>
    <tr>
      <td>6</td>
    </tr>
    <tr>
      <td>7</td>
    </tr>
  </tbody>
</table>

Is there a way to choose columns 2 to 6 of the row that is currently selected

Answer №1

Answer №2

Similar questions

Discover the secrets to replicating the mesmerizing horizontal scrolling menu akin to the

What are some ways to prevent popups from being hidden by CSS?

Achieve a centered content with a stretched background using Bootstrap 5

Update the logo for mobile, desktop, and tablet display using Bootstrap 4alpha

Aligning a table at the center of another table

The issue of font icons not displaying seems to be affecting all users

Is it possible to utilize the useRef Hook for the purpose of storing and accessing previous state values?

Optimizing CSS for printing by eliminating unnecessary white space with media queries

"Exploring the variations in design between wordpress.com and self-hosted wordpress

Adjusting the size of the snap increments

What is causing this animation to malfunction?

Exploring the functionality of Jquery with the :active selector

div cannot be placed next to each other

The sass compiler has produced two separate CSS files, but I am only able to link one of them to the index.html file

Using jQuery AJAX to preload GIF images for CSS background-image loading

Design a navigation bar that seamlessly incorporates an image

How can I position my navbar above my background image using Bootstrap?

What causes the alignment of text to be overridden by the presence of a floating element?

A guide on showcasing items on an html webpage through the use of javascript

What is the best way to replicate floats using flexbox?