How can I access the title or text of an "a" nested within a "td" using JavaScript?

Question

I have a calendar where the day cells are clickable "td" elements. Inside each is an "a" that has a title. I need to use this title in a JavaScript function that is called when any of the "td" elements are clicked. I had to disable the PostBack for all "a" elements

Here is code for one of the cells:

<td align="center" style="width:14%;"><a href="javascript:__doPostBack('ctl00$MainContent$Calendar2','6314')" style="color:Black" title="April 15">15</a></td>

I just need to access the 15 text technically. I can get the month elsewhere.

Is this possible using JavaScript?

You question is not clear. Do you want to add a listener to each of the A elements, or do you want to access the title property from within the __doPostBack function? It seems to me you should be using a span with click listener, not an A element. — RobG
– RobG, Commented Apr 30, 2017 at 1:55
@RobG So when the TD is clicked, a JavaScript function is called. When is is called I need a way to use the text of the A that is within the TD that was clicked. I can't change these elements. I can't change the elements. — Andrew
– Andrew, Commented Apr 30, 2017 at 2:06

suufi · Accepted Answer · 2017-04-30 02:17:55Z

Using jQuery for this would be a pretty good idea since you can select elements pretty conveniently. With jQuery you'd use:

$('td a').attr('title');

If you still want to use pure Javascript, you can select the title of the element by using:

document.querySelectorAll('td a')[0].title;

In the end, they both get the job done but the jQuery code is shorter.

So you'd do something similar to this with jQuery.

$('td a').on('click', function() { console.log($(this).attr('title')); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <th> <tb> <tr> <td> <a href="#" title="hi"> Hey </a> </td> </tr> <tr> <td> <a href="#" title="hi2"> Oh </a> </td> </tr> <tr> <td> <a href="#" title="hi3"> Goodbye </a> </td> </tr> </tb> </th> </table>

the jQuery code might be shorter, but you just added 10,000 lines of code to the page… ; -)
Will this give the title of only the A within the TD that was clicked by the user? If yes, would using $('td a').attr('text') give me the text "15" in the example I provided?
@AndrewMcCracken Check out my latest edit. To get the text in the anchor tag you'd do $(this).text()

RobG · Accepted Answer · 2017-04-30 06:35:39Z

It's not exactly clear to me what you're after, but if you can control the call, then including this in the call gives you a reference to the element that called the listener, e.g.

<a href="javascript:__doPostBack('ctl00$MainContent$Calendar2','6314', this)"...>

Then in the listener, you have a reference to the element and you can get its title property directly, e.g.

function __doPostBack(arg0, arg1, element) { var title = element.title; // title is the value of the element's title property }

I had to disable the PostBack for all "a" elements

I don't understand what that means. If it means you don't want to use __doPostBack to get the title and want to add a listener to each of the links, then you can do that quite simply too:

window.onload = function(){ [].forEach.call(document.querySelectorAll('td a'), function(a){ a.addEventListener('click', showTitle, false) }); }; function showTitle(){ console.log(this.title); }

<table> <tr><td><a href="#" title="foo">foo <tr><td><a href="#" title="bar">bar <tr><td><a href="#" title="fum">fum </table>

Collectives™ on Stack Overflow

How can I access the title or text of an "a" nested within a "td" using JavaScript?

2 Answers 2

5 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Related