Ways to emphasize several rows by hovering over a single row

One issue I am currently facing in my table is that I have values within a column that span over multiple rows. However, when I hover over these values, only one row gets highlighted (the row with the actual value). I am looking for a solution to highlight all other rows as well when hovering over the value that spans across them.

Here is an example of the code:

    table {
        border-collapse: collapse;
        width: 100%;
    }
    
    th, td {
        padding: 8px;
        text-align: left;
        border-bottom: 1px solid #ddd;
    }
    
    tr:hover{background-color:#f5f5f5}
<h2>Hoverable Table</h2>
    <p>Move the mouse over the table rows to see the effect.</p>
    
    <table>
      <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Points</th>
      </tr>
      <tr>
        <td>Peter</td>
        <td>Griffin</td>
        <td rowspan="2">$100</td>
      </tr>
      <tr>
        <td>Lois</td>
        <td>Griffin</td>
      </tr>
      <tr>
        <td>Joe</td>
        <td>Swanson</td>
        <td rowspan="2">$300</td>
      </tr>
      <tr>
        <td>Cleveland</td>
        <td>Brown</td>
      </tr>
    </table>

javascriptjqueryhtmlcss

Answer №1

When hovering over $100, it is not possible to highlight both Peter and Lois rows using CSS alone. JavaScript scripts are required for this functionality. Refer below snippet for implementation:

$('.hasRowSpan').hover(function(){
$(this).closest('tr').toggleClass('bg-red');
$(this).closest('tr').next('tr').toggleClass('bg-red');
});
table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

tr:hover{background-color:red}

.bg-red{
  background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Points</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
    <td class="hasRowSpan" rowspan="2">$100</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Joe</td>
    <td>Swanson</td>
    <td class="hasRowSpan" rowspan="2">$300</td>
  </tr>
  <tr>
    <td>Cleveland</td>
    <td>Brown</td>
  </tr>
</table>

Update: Utilize nextAll() for handling rows with more than 2 row spans.

$('tr').hover(function() {
if ($(this).find('td').hasClass('hasRowSpan')) {
$(this).next('tr').toggleClass('bg-red');
}
if ($(this).prev('tr').find('td').hasClass('hasRowSpan')) {
$(this).prev('tr').toggleClass('bg-red');
}
});
table {
border-collapse: collapse;
width: 100%;
}

th,
td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}

 tr:hover {
background-color: red
}

.bg-red {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td class="hasRowSpan" rowspan="2">$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
<tr>
<td>David</td>
<td>Rijo</td>
<td>$500</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td class="hasRowSpan" rowspan="2">$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
</tr>
</table>

Update 1: Updated script based on feedback provided. Note: May not work if rowspan exceeds 2 rows.

$('.hasRowSpan').hover(function() {
$(this).closest('tr').toggleClass('bg-red');
$(this).closest('tr').next('tr').toggleClass('bg-red');
});

$('tr').hover(function() {
if ($(this).prev('tr').find('td').hasClass('hasRowSpan')) {
$(this).prev('tr').find('td.hasRowSpan').toggleClass('bg-red');
}
});
table {
border-collapse: collapse;
width: 100%;
}

th,
td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}

tr:hover {
background-color: red
}

.bg-red {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td class="hasRowSpan" rowspan="2">$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
<tr>
...
</table>

Update 2: Revised code to better achieve desired output.

Answer №2

If you're okay with your rows being in different tbody tags, it's possible to achieve this using only html and css.

    table {
        border-collapse: collapse;
        width: 100%;
    }
    
    th, td {
        padding: 8px;
        text-align: left;
        border-bottom: 1px solid #ddd;
    }
    
    tbody:hover{background-color:#f5f5f5}
<h2>Hoverable Table</h2>
    <p>Move the mouse over the table rows to see the effect.</p>
    
    <table>
      <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Points</th>
      </tr>
      <tbody>
        <tr>
          <td>Peter</td>
          <td>Griffin</td>
          <td rowspan="2">$100</td>
        </tr>
        <tr>
          <td>Lois</td>
          <td>Griffin</td>
        </tr>
      </tbody>
      <tbody>
        <tr>
          <td>Joe</td>
          <td>Swanson</td>
          <td rowspan="2">$300</td>
        </tr>
        <tr>
          <td>Cleveland</td>
          <td>Brown</td>
        </tr>
      </tbody>
    </table>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Update the stationary background image on select div elements

Currently working on a "our story" section where the divs move up and change the background image when they reach the center of the screen. I am aiming for a fixed background image that transitions smoothly when the div is in the middle. The relationship b ...

htmljquerycsscss-animationscss-transitions

Remove a jQuery class from a parent, sibling, or child element

After implementing this jQuery code to toggle classes on elements within an unordered list, I'm not entirely convinced it's the most efficient approach. Are there any better alternatives to achieve the same effect? $(function() { $('nav ...

jquery

Pass the returned variable value from a request.get call to another function in NodeJS Express

I have a situation where I am calling a function that makes a request to get some JSON data and then fills in the variables from my router.get method. The issue I am facing is that the variables are getting their value inside the callFunc function, but wh ...

javascriptnode.jsexpresspug

"Learn how to dynamically change the color of a button in Angular after it has been clicked

Can someone assist me in changing the button color to red after it has been clicked? I am looking for guidance on how to achieve this. The current code snippet is as follows: <td> <button mat-icon-button color="primary"> <m ...

htmlangularangular6

Utilize the Magento extension to seamlessly integrate JavaScript code into the head section of your website

I am attempting to incorporate JavaScript code into all or some pages of my website using an extension. I require a dynamic version (hosted in a .phtml file) of the following script: <default> <reference name="head"> & ...

javascriptphpxmlmagentotemplates

Is it possible to reset a form without using JavaScript? (The input type=reset function is not functioning correctly

So, basically I need a quick way to clear all the fields in my form. I've experimented with a couple of options: <input type="reset" value="Clear all fields"> And <button type="reset">Clear all fields</button> Unfortunately, none ...

htmlformsbuttonreset

Error: The function styles$1.makeStyles is not defined

Currently, I am experimenting with rollup for bundling. However, when I run the code, I encounter the following problem: https://i.stack.imgur.com/8xLT3.png import { makeStyles } from '@material-ui/styles'; const styles = makeStyles({ subHead ...

javascriptreactjsmaterial-uinext.jsrollup

Unable to interact with the reappeared element selected using jQuery

After using developer tools in both Chrome and Firefox, I successfully created an XPath for a specific element. However, when attempting to click on the element by hovering over the returned value $x(xpath), I encountered an error. The error message read: ...

javascriptseleniumtestingxpath

Monitoring variables in AngularJS services

Hey, I'm having some trouble with this issue. I've searched everywhere for a solution, but couldn't find one, despite there being similar questions out there. Basically, I have a class and I only need one instance of it, so I created a serv ...

javascriptangularjsangularjs-service

Combining text and images in XSLT using CSS: A comprehensive guide

Greetings! I am facing a situation where I have an XML file containing image tags like this: <pb facs="ciao.jpg">. Additionally, I have an XSL file that includes a JavaScript snippet as shown below: <script type="text/javascript> function ...

cssimagetext

Restangular fails to return the objects received from the REST API

Seeking assistance for a service issue. I have a service that can be accessed via the domain/service/webapi/ URL. When calling domain/service/webapi/menu/getmenucategory, it returns the JSON string representing the application's menu structure: The p ...

javascriptjsonrestasp.net-web-apirestangular

Node JS login leads to fetching /favicon.ico

I've implemented a login/register system using express (passport) on my website. I'm facing an issue where after the user logs in, they are redirected to /favicon.ico instead of the saved originalUrl. Can anyone help me identify what might be cau ...

htmlnode.jsexpresshttp-redirectfavicon

Are there any quicker methods to surrender to the Javascript event loop other than using setTimeout(0)?

Attempting to create a web worker that can pause during computation is proving to be challenging. As of now, the only method I am aware of (aside from using Worker.terminate()) involves periodically allowing the message loop to check for any incoming messa ...

javascriptsettimeoutweb-workerevent-loop

Guide to creating several AJAX requests using a for loop

I'm currently experimenting with the Star Wars API (SWAPI) and attempting to display the names of all the planets. However, the planet information is spread across multiple pages. How can I go about making several AJAX requests in order to retrieve an ...

javascriptajax

Once the class is displayed in the DOM, click on the button to proceed

Within a popup window, there exists a form that utilizes Ajax to send data. Upon successful submission of the form, a message indicating success will appear below with the class name .form-message--success. My goal is for the close button within the window ...

javascriptjquery

Issues with Bootstrap's center-block functionality

I'm having trouble centering the navigation in my WordPress template that uses Bootstrap. I've tried using the center-block class on different elements, but the menu items are still aligning to the left. I even created a custom class in my custom ...

htmlcsswordpresstwitter-bootstrap

How to Parse HTML Content within a JSON Field using C#

Is there a way to decode an HTML string inside a JSON property using a console application, like in the example below?: { "type":"text", "html":"\n\n\n <div class=\"class\">\n <ul>\n\n&b ...

c#htmldeserialization

What is the name of the file that contains a class?

I am curious about identifying the file that called a specific class: database.ts class Database { constructor() { console.log(`I want to know who called this class`); } } server.ts import Database from 'database.ts'; new Databa ...

javascripttypescriptclassoop

Neglecting to refresh the content within the modal body

I am facing an issue with an empty modal on my webpage and an AJAX call that I am trying to execute as shown below (simplified for easier understanding). function fetchContent(x) { $.ajax({ type:"POST", url:"link", data:{id:"123"}, suc ...

javascriptajax

Incorporate a Vue component into a string for seamless integration with Buefy's confirmation feature

Can a vue component be loaded into a string for use with buefy confirm? I attempted the following approach, but it did not work as expected: archiveChannelPrompt () { const archiveChannel = document.createElement('template'); new Vue({ ...

javascriptvue.jsbuefy