Fetching the column id in a table using jQuery

Question

I have this table structure.

<table id = "table1">
   <thead>
      <tr id = "header_row">
         <th> <a id = "a1">ABC</a> </th>
         <th> <a id = "a2">DEF</a> </th>
         <th> <a id = "a3">GHI</a> </th>
         <th> <a id = "a4">JKL</a> </th>
      </tr>
   </thead>
   <tr>.....data filling up the table.....</tr>
   <tr>.............</tr>
   .
   .
</table>

So from this table, I want to fetch the value "a2", Can you please tell me how to do this? Thanks!

EDIT: There are many other <a> <table> tags on the page, so if there is any way to extract using the id?

Answer 1

To fetch the value of the #a2 you can simply do:

Plain JavaScript:

document.getElementById('a2').innerHtml;

jQuery:

$('#a2').text();

---

A side note. This sentence:

So from this table, I want to fetch the value "a2"

makes me think that you're using the same ids for different tables in the same page and you want to retrieve data from a specific one, aren't you? This situation is wrong, ids MUST be unique in your whole page so if this is your case consider using classes

Answer 2

So from this table, I want to fetch the value "a2"

You mean fetch the id of second column in the header row?

Try this

$("#header_row th a:eq(1)").attr("id")

If you simply wants to fetch ABC of a know a based on its id then

$("#a2").html(); //or text()

Answer 3

You can get by this $("#a2").text();