Challenges with selecting elements using jQuery

Hey there! I've got a bit of a coding puzzle. I can successfully select a td and change the image inside it, but I also need to display the id of the selected td. The catch is that my function first has to select the image to change it. Is there a way to achieve both tasks? I want the click event to select the image, change it, and then display an alert with the td id. Check out the code below!

Here is the jQuery code:

$(document).ready(function(){
  $("td img").click(function() {
    $(this).attr('src', 'images/d.gif');
    alert($(this).attr("td id"));
    return false;
  });
});

And here is the HTML:

<div id='plan'>
<table>
 <tr>
   <td class='n' id='a1'><img src='images/a.gif'/></td>
   <td class='n' id='a2'><img src='images/a.gif'/></td>
   <td class='n' id='a3'><img src='images/a.gif'/></td>
   <td class='n' id='a4'><img src='images/a.gif'/></td>
   <td></td>
   <td class='n' id='a6'><img src='images/a.gif'/></td>
   <td class='n' id='a7'><img src='images/a.gif'/></td>
   <td class='n' id='a8'><img src='images/a.gif'/></td>
   <td class='n' id='a9'><img src='images/a.gif'/></td>
 </tr>
 <tr>
   <td class='n' id='b1'><img src='images/a.gif'/></td>
   <td class='n' id='b2'><img src='images/a.gif'/></td>
   <td class='n' id='b3'><img src='images/1.gif'/></td>
   <td class='n' id='b4'><img src='images/1.gif'/></td>
   <td></td>
   <td class='n' id='b6'><img src='images/1.gif'/></td>
   <td class='n' id='b7'><img src='images/a.gif'/></td>
   <td class='n' id='b8'><img src='images/a.gif'/></td>
   <td class='n' id='b9'><img src='images/a.gif'/></td>
 </tr>
 <tr>
   <td class='n' id='c1'><img src='images/1.gif'/></td>
   <td class='n' id='c2'><img src='images/1.gif'/></td>
   <td class='n' id='c3'><img src='images/a.gif'/></td>
   <td class='n' id='c4'><img src='images/a.gif'/></td>
   <td></td>
   <td class='n' id='c6'><img src='images/1.gif'/></td>
   <td class='n' id='c7'><img src='images/1.gif'/></td>
   <td class='n' id='C8'><img src='images/a.gif'/></td>
   <td class='n' id='C9'><img src='images/a.gif'/></td>
 </tr>
 <tr>
   <td class='n' id='d1'><img src='images/1.gif'/></td>
   <td class='n' id='d2'><img src='images/1.gif'/></td>
   <td class='n' id='d3'><img src='images/1.gif'/></td>
   <td class='n' id='d4'><img src='images/1.gif'/></td>
   <td></td>
  <td class='n' id='d6'><img src='images/1.gif'/></td>
  <td class='n' id='d7'><img src='images/1.gif'/></td>
  <td class='n' id='d8'><img src='images/1.gif'/></td>
  <td class='n' id='d9'><img src='images/1.gif'/></td>
 </tr>
 <tr>
  <td class='p' id='e1'><img src='images/1.gif'/></td>
  <td class='p' id='e2'><img src='images/1.gif'/></td>
  <td class='p' id='e3'><img src='images/1.gif'/></td>
  <td class='p' id='e4'><img src='images/1.gif'/></td>
  <td></td>
  <td class='p' id='e6'><img src='images/a.gif'/></td>
  <td class='p' id='e7'><img src='images/a.gif'/></td>
  <td class='p' id='e8'><img src='images/1.gif'/></td>
  <td class='p' id='e9'><img src='images/1.gif'/></td>
</tr>
</table>
</div>

Answer №1

It appears that the correct syntax should be $(this).parent().attr("id");

Your provided code:

alert($(this).attr("td id"));

This snippet is mistakenly seeking an attribute called td id within the img tag.

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

Buttons failing to adjust the color of the background and text

There seems to be an issue with this piece of code. I can't quite put my finger on it, but something is definitely off. I am trying to make it so that when a button is clicked, the background color and text font changes. Unfortunately, this is not wo ...

Implementing Bootstrap 4 validation within a modal using JSON data

I've been struggling to validate the TextBoxFor before submitting the form. Despite trying various methods, I haven't managed to make it function properly. Modal: <div class="modal fade" id="MyModal_C"> <div class="modal-dialog" st ...

Adding a C# variable to a URL in a Razor view using jQuery

My Razor page looks like this: @{ ViewData["Title"] = "mypage"; string ApiAddress = "https://localhost:8114/api/"; } <div> ... </div> @section Scripts{ <script> functio ...

Ways to utilize a single HTML page for various URLs while changing one variable value based on the queried URL

My current HTML page structure looks like this: <body ng-controller="DashboardDisplay" onload="submit()"> <div class="container-fluid" > {{scope.arr}} </div> </body> <script> var myApp = angular.module(&apos ...

The navigation bar logo on my website has mysteriously vanished

Even though my main website is built with Wordpress, I decided to start a blog using Tumblr. You can visit my website here: And here is my blog: I tried to replicate the same structure of my website on my Tumblr theme. However, I encountered an issue w ...

"Exploring the Connection Between PHP, JSON, and

In my current class, we are collaborating on an android app project for our school. Due to the lack of physical meetings, I haven't had direct contact with some of my classmates. One member of the group has been responsible for programming the json an ...

Using Django to make an AJAX call on a Bootstrap dropdown menu

Issue: I'm struggling to find a solution to load the entire chart HTML into a div by calling a function from views.py and passing the context to reference_page.html without having to refresh the page. I have a chart similar to a stock chart, with a d ...

Error in Java Spring occurs when the webpage is loaded due to a Maven compilation error in

Every time I execute the program, an error occurs: 2022-11-25 18:31:53.591 ERROR 8435 --- [nio-8080-exec-1] o.a.c.c.C.[.[.[/].[dispatcherServlet] : Servlet.service() for servlet [dispatcherServlet] in context with path [] threw exception [Request proces ...

Tips for creating animations with multiple elements that share the same classes

I am trying to create expandable boxes that can open onclick and close again by clicking on the X. The issue I'm facing is that the close jQuery function isn't working. However, my main concern is how to optimize the code so it doesn't becom ...

I'm unable to select a checkbox using Python Selenium

My attempt to create a checkbox using Python Selenium resulted in an error message. selenium.common.exceptions.ElementNotInteractableException: Message: element not interactable I believe the issue lies with the element, but I am unsure of its exact locat ...

Sending a personalized event to a JavaScript object

I am looking to create an object Constructor that can dispatch a customEvent, which I then want to listen to from the instance of the object. The code snippet provided showcases what I have been attempting. I would appreciate any assistance on how to mak ...

Processing AJAX request without reloading the page using PHP

I need assistance with creating an image cropping tool that allows users to upload a picture, crop it, and display it on the page as an image.jpg rather than as base 64 (data:image). I have tried using HTML and JavaScript but it seems impossible, so now I ...

Troubleshooting overflow problems when centering a UL menu with an unspecified width

Trying to create a demo where the scrollbars are removed when resizing smaller, but adding overflow: hidden causes issues with sub-menus. Demo Link HTML <nav> <ul> <li><a href="#">Menu Item</a></li> ...

CSS: Trouble with elements positioning

I am attempting to position two boxes on top of each other at the bottom of a different div. Here is the code I have: <div style = "height:400px;width:400px;border:1px solid #000;"> <div style = "position:relative;height:100px;width:100px;bor ...

Show the entered user data in a separate Div when the button is clicked

Whenever a button is clicked, I am currently able to show the user input from the textbox. However, it always displays in the same Div. The HTML file with the textbox and button- <input type="text" name="inputText"><br> <tr> &l ...

What is the method for creating a clickable link using only HTML5 and CSS3 on a div?

Throughout the ages, this question has persisted, with answers that have stood the test of time. I've explored various solutions, yet none have met my expectations. I aim to create a fully clickable link for div .content1 without relying on text or ...

Ways to display or conceal a moving svg based on the current tab selection

Below is the fiddle and snippet: https://jsfiddle.net/e130kr2x/ I've successfully achieved animating the SVG when a tab is active, but I'm facing difficulty in making it not display or fade out when opening a new tab. The new tab should activate ...

The load method in MVC jQuery is not being properly triggered within the $(document).ready function

Currently working on an MVC5 Application.. In my project, I am trying to render two partial views by calling a controller method from $(document).ready of the main view. However, one of the methods never gets called. Below is a snippet of my view: < ...

Implementing JavaScript to Take an Array of Integers from an HTML Input Field and Sort It

Task: Retrieve 10 Array Values from HTML Input Field and Arrange Them in Ascending Order In order to add 10 values from an HTML input field to a JavaScript array, I have created an input field through which data is passed to the array in JS. Two labels ar ...

Sorting the Czech alphabet with the help of Tablesorter

Utilizing the tablesorter characterEquivalents extension as outlined in this documentation. I have created a similar extension for Czech characters, but the sorting is not functioning correctly for certain characters - like \u017d $.extend( $.tables ...