Retrieve the value of the second child element in a table cell when clicking on it with Javascript

I have created a table with one row that includes the title of the month and a cell containing an inner table with multiple rows and cells. I want to display the content of the second cell in the second table as a modal box or alert dialog when it is clicked.

Currently, the alert box pops up when either cell is clicked. However, I only want to trigger the alert dialog when the second cell is clicked.

Below is my table setup:

$("table table tr").click(function() {
  alert($(this).children("td").text());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<head>
  <style>
    table,
    th,
    td {
      border: 1px solid black;
    }
  </style>
</head>

<body>

  <table>
    <tr>
      <th>Month</th>

    </tr>
    <tr>
      <td>January

        <table>
          <tr>
            <td>Do not show details of this cell</td>
          </tr>

          <tr>
            <td>Show details of this cell when clicked</td>
          </tr>

        </table>

      </td>

    </tr>


   
  </table>

</body>

</html>

Answer №1

Utilize the Css property tr:nth-child(2) to select the second cell value.

The complete code snippet is provided below:

$('table table tr').eq(1).on('click', function(){ alert($(this).children("td").text());});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<head>
  <style>
    table,
    th,
    td {
      border: 1px solid black;
    }
  </style>
</head>

<body>



  <table>
    <tr>
      <th>Month</th>

    </tr>
    <tr>
      <td>January

 <table>
          <tr>
            <td>Do not show details of this cell</td>
          </tr>

          <tr>
            <td id="mytable">Show details of this cell when clicked</td>
          </tr>

        </table>

      </td>

    </tr>




   
  </table>

</body>

</html>

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

Transfer all image files from Node.js to the frontend

What is the best way to send all image files from my backend nodejs server folder to my Reactjs client? I have set up a website where users can sign in and upload their files. However, I am facing an issue where only one file is visible on the client side, ...

Styling with CSS will keep your content centered on the page, while the background

I'm looking to create a layout with the following specifications: The content wrapper will have a fixed size and be centered: .content { width:960px; margin:0px auto; } My issue is how to implement the left-aligned background bar for the su ...

Using a custom function, automatically initiate audio playback when an Android WebView JS loads

I have a unique JS function specifically designed for the audio tag, which also controls the progress bar. It works perfectly when I click on the associated tag <a onclick="playSound(1)">. However, if I try to initiate it on page load, the function s ...

I am trying to use ajax to upload a photo in ASP.NET MVC, but when the file reaches the controller, it is showing

I am trying to upload a profile photo using Ajax in ASP.NET MVC, but I am encountering an issue where the upload parameter is coming as null to the action method. Here are the HTML codes for the file upload section: <div class="preview"> <di ...

Navigating the elements within R Shiny: A comprehensive guide

Can anyone help me figure out how to access specific elements in my Shiny app using their HTML tags? In this particular example, I need to retrieve all h1 elements along with their respective labels and IDs. library(shiny) ui <- fluidPage( h1("Get" ...

Issue encountered while performing an Upsert operation on Pinecone using Node.js

Oops! PineconeArgumentError: The argument provided for upsert contains type errors: the argument should be an array. Package "@pinecone-database/pinecone": "^1.0.0", Inquiry const index = pinecone.Index(process.env.PINECONE_INDEX_NAME ...

Turn off all the styles associated with a specific CSS selector

Looking for a solution to override CSS rules for the .lp-caption selector? .lp-caption { -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; backgr ...

Utilize jQuery, Flash, or HTML5 to upload an image

Does anyone know of an upload tool or plugin that has a similar look and functionality to the one used on Codecanyon's website? I tried Uploadify, but it doesn't work on all browsers. I need something that is compatible with all browsers, whether ...

Detach attention from TextField select component in Material UI and React through manual means

When I create a select input using the TextField component from Material-UI library, I need to manually remove focus after an option is selected. I attempted to achieve this by using a reference to the TextField with the 'inputRef' prop. However, ...

Text alignment and block dimensions

I attempted to organize three buttons within a block. <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.3/tailwind.min.css" rel="stylesheet"/> <div class="grid grid-cols-1 md:grid-cols-3 text-center place-content-center"> ...

Element sticking and bouncing

I'm currently facing an issue with Sticky-kit where one of my elements jumps when it reaches the bottom of its parent div. Below is the code snippet: <div class="wrapper"> <div id="bg"> <div id="text"> Lorem ipsum dolor sit a ...

Leveraging IE conditional comments for including CSS or JavaScript files can lead to an increase in the number of HTTP

Our web designer has implemented special pages for Internet Explorer by using IE-specific comments. This means that certain stylesheets are only loaded if the user is using a specific version of IE: <!--[if lt IE 7]> <link type="text/css" rel="st ...

Wordpress is having issues running jQuery

I've developed a function inside js/custom.js. The purpose of this function is to arrange posts in my Wordpress site by applying a class called articleAlign. This class will enhance the spacing between the article title and its excerpt, but only when ...

Utilize JavaScript to seamlessly play a Spotify track within the Spotify client without disrupting your current

A little while back, I recall the simplicity of clicking play on a song within a website and having it instantly start playing on my computer without any additional steps. It was seamless and effortless. My goal for my website is to have music start playi ...

Tips for changing the default height of Elastic UI dropdown menus

I am attempting to adjust the height of the Task combobox to match that of the Date Picker, but the styling is not being applied when done through a class or inline. https://i.sstatic.net/3Cua1.png I have tried inline styling the element as: <EuiForm ...

Run a function after all xmlHttpRequests have finished executing

OVERVIEW My website relies on an API to fetch data, making multiple post and get requests to a server upon opening. While we know how long each individual call takes, determining the total time for all calls to complete is challenging. SCENARIO For inst ...

The use of fs.writeFileSync is invalid and will not work for this operation

Encountering an issue while working with fs in next.js, receiving the following error message: TypeError: fs.writeFileSync is not a function Here's a snippet from my package.json: resolve: { fallback: { "fs": false }, } ...

How to Add a Responsive Inset Transparent Overlay to Images without Using JavaScript?

My goal is to create a unique overlay effect on images of different sizes within a Pinterest-style fluid grid layout. The outer border width and inset 'border gap' will remain consistent, while the images themselves need to dynamically adjust. C ...

Using Vue.js to conditionally render content based on changes in a variable

I am facing a challenge in rendering a new element once the boolean variable waiting changes to true. The issue arises when transitioning from one v-if statement to another, as the boolean does not update until the first statement is completed. How can I s ...

Changing the index of an item in an array in React based on order number

Hey there, I'm a new Reactjs developer with a question. It might be simple, but I'm looking to learn the best practice or optimal way to change the index of a selected item in an array based on user input. Essentially, the user will provide a num ...