I have table and each cell of the table has specific url. I am trying to get the url on specific cell using jquery. Problem here is no class or id is defined for table, row and column. Just want to pull the href attribute using the tags only.

         <table>
             <tr>
                <td><a href='MytestSite11'>site21</a></td>
                <td><a href='MytestSite12'>site22</a></td>
                <td><a href='MytestSite13'>site23</a></td>
            </tr>
            <tr>
                <td><a href='MytestSite21'>site21</a></td>
                <td><a href='MytestSite22'>site22</a></td>
                <td><a href='MytestSite23'>site23</a></td>
            </tr>
             <tr>
                <td><a href='MytestSite31'>site21</a></td>
                <td><a href='MytestSite32'>site22</a></td>
                <td><a href='MytestSite33'>site23</a></td>
            </tr>
        </table>

I am trying to get href element of second row second column which is MytestSite22. I have tried following jquery code but it is returning me undefine.Not sure what is missed on this.

        $(function () {
            var $row = $('table tr').eq(1);
            var $col=$row.eq(1)
            alert($col.attr('href'));
        });

I have table and each cell of the table has specific url. I am trying to get the url on specific cell using jquery. Problem here is no class or id is defined for table, row and column. Just want to pull the href attribute using the tags only.

         <table>
             <tr>
                <td><a href='MytestSite11.'>site21</a></td>
                <td><a href='MytestSite12.'>site22</a></td>
                <td><a href='MytestSite13.'>site23</a></td>
            </tr>
            <tr>
                <td><a href='MytestSite21.'>site21</a></td>
                <td><a href='MytestSite22.'>site22</a></td>
                <td><a href='MytestSite23.'>site23</a></td>
            </tr>
             <tr>
                <td><a href='MytestSite31.'>site21</a></td>
                <td><a href='MytestSite32.'>site22</a></td>
                <td><a href='MytestSite33.'>site23</a></td>
            </tr>
        </table>

I am trying to get href element of second row second column which is MytestSite22. I have tried following jquery code but it is returning me undefine.Not sure what is missed on this.

        $(function () {
            var $row = $('table tr').eq(1);
            var $col=$row.eq(1)
            alert($col.attr('href'));
        });

• javascript
• jquery

• $col is the <td> for that row, which has no href. you need $col.children('a').attr('href') – Marc B Commented Sep 25, 2015 at 20:04

6 Answers 6

You forgot to specify the element in your second variable:

var $col=$row.find('td').eq(1)

Then, specify the anchor inside that:

alert($col.find('a').attr('href'));

For what it's worth, the dollar character as a variable prefix is conventionally used to indicate an array or set. Here, you're using it on a single item.

here is it the href element of second row second column

$("table tr:eq(1) td:eq(1) a").attr("href");

you can just do it all in one go: $('table tr:nth-child(2) td:nth-child(2) a').attr('href');

$(document).ready(function() {
    alert($('table tr:nth-child(2) td:nth-child(2) a').attr('href'));
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <td><a href='MytestSite11.'>site21</a></td>
        <td><a href='MytestSite12.'>site22</a></td>
        <td><a href='MytestSite13.'>site23</a></td>
    </tr>
    <tr>
        <td><a href='MytestSite21.'>site21</a></td>
        <td><a href='MytestSite22.'>site22</a></td>
        <td><a href='MytestSite23.'>site23</a></td>
    </tr>
    <tr>
        <td><a href='MytestSite31.'>site21</a></td>
        <td><a href='MytestSite32.'>site22</a></td>
        <td><a href='MytestSite33.'>site23</a></td>
    </tr>
</table>

This is a straightforward way to do it:

var $row = $('table tr:nth-child(2)'), // row
    $col = $row.children('td:nth-child(2)'), // column
    $a = $col.children('a'); // anchor

alert($a.attr('href'));

The :nth-child(n) selector will match an element that's at a certain index amongst children of a shared parent element. Note that it's 1-based, not 0-based (like JavaScript arrays, for example), so the second child is :nth-child(2), the third child would be :nth-child(3), etc.

Here's a CodePen example.

Try this:

var a = $("tr").eq(1).find("td").eq(1).find("a").attr("href");
alert(a);

Also one of possibilities where you can retrieve the value with function:

getMe(RowNumber,ColumnNumber);

<script type="text/javascript" src="https://code.jquery./jquery-2.1.4.min.js"></script>
<script>
    $(document).ready(function(e) {
        getMe(2,2);
    });

    function getMe(rowN, colN) {
        var link = $("tr:eq("+(rowN-1)+") td:eq("+(colN-1)+") a").attr("href");
        alert(link);
    }
</script>