What is the process for triggering an unordered list when I click on a table data cell within the Hospitals category?

Hi there! I need help with writing a JavaScript function for Hospitals in the code below. When I click on Hospitals, I want to display the values in the unordered list.

Expected output: Hospitals--->onclick Bangalore| salem |Goa| Mangalore| Visakhapatnam |Vijawada| jaipur| Malaysia

I am not sure how to call ul id using a function.

Updated HTML:

<div id="locations">
 <h1>Locations</h1>
    <div id="locations1">
        <table cellpadding="0" cellspacing="0" border="0">
        <tr class="hospitails" onClick="">
            <td class="hospitails_class" onClick="">Hospitails</td>
            <td class="clinics_class" onClick="">Clinics</td>
            <td class="homecare_class" onClick="">Home Care</td>
            <td class="information_class" onClick="">Information Centers</td>
        </tr>
        </table>
       <div class="hospitails_loc">
        <ul>
            <li><a href="#">Bangalore</a></li>
            <li><a href="#">salem</a></li>
            <li><a href="#">Goa</a></li>
             <li><a href="#">Mangalore</a></li>
             <li><a href="#">Visakhapatnam</a></li>
               <li><a href="#">Vijawada</a></li>
               <li><a href="#">jaipur</a></li>
                <li><a href="#">Malaysia</a></li>
        </ul>
    </div>
     <div class="clinics_loc">
        <ul>
            <li><a href="#">Lagos(Nigeria)</a></li>
        </ul>
    </div>
     <div class="homecare_loc">
        <ul>
            <li><a href="#">Bangalore</a></li>
            <li><a href="#">Jaipur</a></li>
        </ul>
    </div>
    <div class="information_loc">
        <ul>
            <li><a href="#">Andhrapradesh</a></li>
            <li><a href="#">Karnataka</a></li>
           <li><a href="#">Goa</a></li>
           <li><a href="#">Tamil Naidu</a></li>
        </ul>
    </div>
    </div>
</div>

JavaScript:

    <script type="text/javascript">
$(document).ready(function() {
    $("tr").click(function(event) {
       alert(event.target.id+" and "+$(event.target).attr('class'));
    });
});
</script>

Answer №1

Here is the snippet to be added in your click handler:


  var locations = $('.hospitails_loc ul li a'), length = locations.length, index = 0, stringArray=[];
    for(;index<length;index++){
        stringArray.push(locations[index].text);
    }
stringArray = stringArray.join('|');
alert(stringArray);

For implementing the changes based on your requirements, modify the code as follows. Please review it for any typographical errors:


$(document).ready(function() {
    $(".hospitails").click(function(event) {
var element = $(event.target), selector='',locations,length,index=0, stringArray=[];
if(element.hasClass('hospitails_class')){
  selector= '.hospitails_loc ul li a';
}else if(element.hasClass('clinics_class')){
  selector= '.clinics_loc ul li a';
}else if(element.hasClass('homecare_class')){
  selector= '.homecare_loc ul li a';
}else if(element.hasClass('information_class')){
   selector= '.information_loc ul li a';
} 
        locations = $(selector); length = locations.length;
    for(;index<length;index++){
        stringArray.push(locations[index].text);
    }
stringArray = stringArray.join('|');
alert(stringArray);
    });
});

Answer №2

Here is an example demonstrating how you can achieve this using the Array#map function:

document.getElementById("myRow").onclick = function() {
    function getText(el){ return $(el).text() }

    var links = $('#ul_list li a'),
        names = Array.prototype.map.call(links, getText);
    alert( names );
};

http://jsfiddle.net/e0oynv0r/

Answer №3

Give this a shot, and if there are any errors...

$(document).ready(function(){
  $('#myRow').on('click', function(){
    alert($('#ul_list li').text());
  });
});

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

Leverage AngularJS to dynamically load CSS stylesheets using ng-repeat

I have organized my stylesheets into separate modules for each include, and I am trying to dynamically load them. However, I am facing some difficulties as when they are rendered, all I see is the following markup for each sheet that should be loaded: < ...

Is there a way to verify the availability of an authenticated resource without triggering a pop-up for credentials in the browser?

I am facing the challenge of fetching data from a web service located on a different server without knowing if the user has an active session on that server. If the user does have a session, I want to retrieve the data automatically. However, if they do no ...

Steps to update the value of an object stored within an array

I have a collection of items stored in an array. Each item is represented by an object with properties. I want to update the value of a specific property within each object: var array=[{a:1, b:false}, {a:2, b:true}, {a:3, b:false}] My goal is to set the p ...

What could be causing my table to appear multiple times in the HTML when using jQuery?

Using Jquery to dynamically return a list of products, render it as HTML, and show it on the page using $(selector).html(html), I've encountered an issue. When adding products to the cart too quickly, which triggers the rendering of the cart again, th ...

The dropdown value is limited to storing data up to the specified space

I am facing an issue with storing data selected from the second dropdown in my form. The first dropdown is for selecting the Brand Name of a car, and the second dropdown retrieves data from the database based on the brand name selected. I have used a div t ...

"Converting a basic function into a promise for an AngularJS tutorial: How to handle the error message '

To help my colleagues understand AngularJS, I am creating a dummy exercise. In this example, I want to call a service that provides an Object Array to be passed into a Controller and assigned to a $scope variable (using information about the Beatles). Inst ...

Explore various SVG paths by hovering to reveal or conceal different divs

Hi there, I'll do my best to explain clearly. If this question has already been asked, I apologize as I couldn't find an answer when searching. I've used SVG to create a map on my HTML webpage and it's looking great. I also have hidden ...

Node-static is reporting that the localhost page cannot be located

I am currently attempting to serve static files using node-static. My plan is to eventually run this as a Windows service using nssm. I have successfully executed this process in the past, however for some reason it is not working now. Here is the code sn ...

Troubleshoot: Why is my Google Chrome not playing videos? Uncover the solution with a

I have created a webpage with an HTML video tag that loads dynamically from a JSON file. I am currently using Chrome 50 for this project. The response is successful, and when inspecting the page using Chrome's developer tools, I can see the video tag ...

Setting up Karma configuration to specifically exclude nested directories

When unit testing my Angular 2 application using Karma, I encountered an issue with my directory structure: └── src/ ├── index.js ├── index.js.text ├── index.test.js ├── README.txt ├── startuptest.js ...

Is there a way to align two links side by side, with one on the left and the other on the right?

<a href="example"><p style="text-align:left">Previous Page</a> <a href="example"><p style="text-align:right">Next Page</a> I am trying to figure out how to align these links on the same line. Any suggestions would be a ...

What is the best way to apply color to a line-through click event in React without affecting the font color?

I'm attempting to change the click event on a line-through element to turn red when clicked, but I can't find any solutions. I've tried various methods with no success. Edit: After adding "color":"red" following "none", the line is now red, ...

The Bootstrap tab feature is malfunctioning when a tab is using data-target instead of href

While developing bootstrap tabs for an Angular app, I decided to use the data-target attribute instead of the href attribute to avoid any interference with routes. Here's a snippet of how I structured the tabs: <ul class="nav nav-tabs" id="myTab"& ...

How about having one row with five divs of equal width, each with a margin-right of 20px?

Is there a way to achieve 5 floating divs on one row with a 20px margin-right between each, except for the last-child? This is the desired structure: <div class="f-item pull-left">1</div> <div class="f-item pull-left">2</div> < ...

Having Trouble with Typescript Modules? Module Not Found Error Arising Due to Source Location Mismatch?

I have recently developed and released a Typescript package, serving as an SDK for my API. This was a new endeavor for me, and I heavily relied on third-party tools to assist in this process. However, upon installation from NPM, the package does not functi ...

Running the command "npm start" in ghost (node.js) is causing an error

After successfully installing node.js, I attempted to set up Ghost. However, when running the installation for Ghost using npm install --productions I encountered the following error: > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" da ...

Tips for transferring information between two components when a button is clicked in Angular 2

I am currently working on a code that displays a table on the main page with two buttons, "Edit" and "Delete", for each row. When the Edit button is clicked, a modal opens up. My question is, how can I pass the "employee id" of a specific employee to the ...

Choose the url path using UI-Router option

In my Angular project, I am implementing a complex structure of nested states using UI-Router. I am working on setting up a parent state that will determine the language of the application based on an optional locale path in the URL. For Spanish www.web ...

Creating a CSS key animation for resizing an image: What is the correct way to make an image expand and contract

Check out this CSS key animation example: http://jsfiddle.net/ryurage/Q2ELp/ I'm attempting to make an image grow and occupy most of the window when triggered by user interaction like hovering or click-and-hold. Subsequently, I want the image to shr ...

IE has trouble with CSS inline-block and width-auto styling, leading to incorrect rendering

Recently, I've noticed a strange behavior in Internet Explorer 9-11 and Edge (Spartan). In all browsers except for IE, my example displays as desired: However, in Internet Explorer, it looks different: I used to encounter this issue on multiple bro ...