"Revealing the specific row and column of the selected element in each table when hovering over it

On my webpage, I have set up two tables positioned side by side like this: 

<!DOCTYPE html>
    <table>
        <tr>
            <td>
                <table>
                    <tr><td>1</td><td>2</td><td>3</td></tr>
                    <tr><td>4</td><td>5</td><td>6</td></tr>
                    <tr><td>7</td><td>8</td><td>9</td></tr>
                </table>
            </td>
            <td>
                <table>
                    <tr><td>1</td><td>2</td><td>3</td></tr>
                    <tr><td>4</td><td>5</td><td>6</td></tr>
                    <tr><td>7</td><td>8</td><td>9</td></tr>
                </table>
            </td>
        </tr>
    </table>

Whenever I hover over a cell in either table, I want the corresponding cell in the other table to also be highlighted at the same time (for example, hovering over [0,0] should highlight [0,0] in the other table).

To achieve this effect for one table, I followed the guidance in this link (using addClass and removeClass instead of toggleClass). How can I extend this functionality to cover both tables?

jqueryhtmlcsshtml-tablehover

Answer №1

Here's a technique to achieve this task, it would have been simpler if the tables were given IDs but this approach will do as well:

$('table table td').hover(function() {
    $this = $(this);
  $this.toggleClass('hovered');
    //identifying the selected cell
    cell = $this.closest("table").find("td").index(this);
   $this.closest("table").parent().siblings("td").find("td").eq(cell).toggleClass('hovered');
});

http://jsfiddle.net/rhyu3r0r/1/

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

Looping through items with ng-repeat and creating a submenu with M

When constructing a menu from a JSON file with submenus using the JQuery.mmenu plugin, I encountered an issue when trying to implement the submenu structure with ng-repeat. The raw HTML approach worked perfectly, but as soon as I introduced ng-repeat to dy ...

javascriptjqueryhtmlangularjsmmenu

The button's URL will vary depending on the condition

As a newcomer to coding, I am seeking guidance on creating a button with dynamic URLs based on user input. For instance, let's say the button is labeled "Book Now" and offers two package options: Standard and Premium. I envision that if a user selec ...

javascripthtml

jquery method for retrieving default value from dropdown list

When no option is selected from the dropdown list, I require the default value to be used for business logic purposes. ...

javascriptjqueryangularjsreactjs

Updating the .css file through the graphical user interface, within the managed bean

I have created a jsf page with colorpickers to allow an administrator to modify the main theme of the site, which consists of 4 colors. I have prefixed my main colors in the css file with numbers like this: .element{ background: /*1*/#333333; } When ...

cssjsf

Applying a consistent script with varying inputs on the same HTML page

Is it possible to create a JavaScript code that can be used across different sections of an HTML document? The goal is for the script to fetch data such as title, runtime, and plot from a specific URL request and insert this information into the appropriat ...

javascriptjqueryhtml

Check the data from the radio button selection

I am facing an issue with reading the values of radio buttons in a list, all of which have the same id. Despite trying to retrieve the value of each individual radio button, my code only reads the value of the first radio button. <script src="//ajax. ...

javascriptjqueryasp.net-mvcasp.net-mvc-4

Incorporating a Registration Popup Form in ASP.NET

Looking to implement an Ajax popup for a registration form on my ASP.NET page. What is the recommended approach to achieve this? How can I ensure that my database is updated without needing to refresh the page? ...

javascriptasp.netajaxjquery

Explore Youtube to find the most popular video IDs

Is it possible for me to use a string to search YouTube and retrieve the id for the top video in the search results? I want to be able to play that video directly on my website. All I have is the URL for the search: youtube_url/results?search_query=thevid ...

javascriptphpjqueryurlyoutube

Concealing forms within an Angular 5 application

I'm currently working on displaying the terms of use on the initial screen along with two buttons. If the user clicks the accept button, they will be directed to the authentication form. However, if they click refuse, the "Refused Terms" screen will a ...

angularhtmltypescript

Animating an image with CSS steps to create a captivating shaking

My attempt at creating a basic animation is not producing the desired smoothness. .animate { animation: motion 1.5s steps(27) forwards; } @keyframes motion { 100% { background-position: -5778px; } } <div class="animate ...

htmlcssanimation

How can you make each <li> in an HTML list have a unique color?

Looking for a way to assign different colors to each <li> element in HTML? <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <ul> Here's how you want them displayed: Item 1 should be red Ite ...

javascripthtmlasp.net

Adding an active class to a large image when a thumbnail image is clicked can enhance user experience and

I've created a photo gallery using jquery. Currently, when I click on "next", the image changes based on the index. However, I also want to be able to click on the thumbnails (small images) and display the larger image according to that specific inde ...

javascriptjqueryhtmlcssslider

Converting an Integer to a String and then manipulating the String format

<p class="card"> Credit Limit: <b style="color: #00e500 ;"> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dcf89c91b3b8b9b0f29faeb9b8b5a890b5b1b5a8f288b38fa8aeb5b2bb">[email protected]</a>().ToLocaleSt ...

c#htmlstringvisual-studioint

Erase jQuery from the text

I am struggling with splitting or removing text from a filename. For example, if I have filenames like: 200726100_50-0002.JPG 230514008_60-0001.JPG The desired result should be: 230514008_60.JPG 200726100_50.JPG Am I not using the split function cor ...

javascriptjqueryhtml

Adding a request parameter to an ajax Request for a jQuery dataTable that has been initialized from JSON and mapped by Spring can be achieved by including

I have a jQuery dataTable that is initialized from jSON and mapped by a Spring framework. Currently, I am not passing any parameters and retrieving all information. However, I now need to pass a single String to the Java method, most likely through a requ ...

javajqueryajaxjsonspring

What is the best way to retrieve a value in Ajax?

I'm trying to assign the result of an MVC controller method to a variable. function someFunction(){ var result; $.Ajax{ //??? } return result; } //Contrast with C++ int f() { //just! return result; } Post Script: Th ...

javascriptjqueryc++ajax

Rendering JSON Data in JavaScript using Table Pagination

Currently, I am working on rendering JSON data from a URL onto a table. My challenge is to display only 10 rows per page and I'm seeking guidance on how to achieve this. Below is the code snippet that I am using for rendering the data: const url = " ...

javascriptjqueryjsonrendering

Click the button on your mobile device to open the already installed Android app

After creating a small Android app using jQuery Mobile, I incorporated a button to open another native Android app. Is it feasible for the jQuery Mobile app button to load/open an already installed and functioning native Android app upon click? I would gr ...

javascriptandroidjqueryjquery-mobilenative

I'm experiencing difficulty accessing the correct identification number for my questions on the website

Hi, I'm currently developing a website using Meteor where users can post questions and receive answers. I want to implement a feature that allows users to delete their own questions. When I try to directly pull the ID of the question and delete it, it ...

javascriptjquerymeteor

Ensure that the "select" dropdown menu remains a constant size

One section of my Android app, powered by JQuery Mobile, displays a table with a combobox. The issue arises when selecting the option with a very long text, causing the combobox to expand and show half of the table off-screen. My goal is to set the combob ...

androidjquerycsshtmljquery-mobile