CODEWITHSUNDEEP
javascriptjquery
LilRazi
LilRazi

Reputation: 770

how to pull href attribute inside the table element

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.com'>site21</a></td>
                <td><a href='MytestSite12.com'>site22</a></td>
                <td><a href='MytestSite13.com'>site23</a></td>
            </tr>
            <tr>
                <td><a href='MytestSite21.com'>site21</a></td>
                <td><a href='MytestSite22.com'>site22</a></td>
                <td><a href='MytestSite23.com'>site23</a></td>
            </tr>
             <tr>
                <td><a href='MytestSite31.com'>site21</a></td>
                <td><a href='MytestSite32.com'>site22</a></td>
                <td><a href='MytestSite33.com'>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'));
        });

Upvotes: 1

Views: 2461

Answers (6)

Ren
Ren

Reputation: 330

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

getMe(RowNumber,ColumnNumber);

<script type="text/javascript" src="https://code.jquery.com/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>

Upvotes: 0

Pankaj Saboo
Pankaj Saboo

Reputation: 1185

Try this:

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

Upvotes: 0

Bungle
Bungle

Reputation: 19712

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.

Upvotes: 0

indubitablee
indubitablee

Reputation: 8206

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.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <td><a href='MytestSite11.com'>site21</a></td>
        <td><a href='MytestSite12.com'>site22</a></td>
        <td><a href='MytestSite13.com'>site23</a></td>
    </tr>
    <tr>
        <td><a href='MytestSite21.com'>site21</a></td>
        <td><a href='MytestSite22.com'>site22</a></td>
        <td><a href='MytestSite23.com'>site23</a></td>
    </tr>
    <tr>
        <td><a href='MytestSite31.com'>site21</a></td>
        <td><a href='MytestSite32.com'>site22</a></td>
        <td><a href='MytestSite33.com'>site23</a></td>
    </tr>
</table>

Upvotes: 1

isherwood
isherwood

Reputation: 61055

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.

Upvotes: 5

Diptox
Diptox

Reputation: 1809

here is it the href element of second row second column

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

Upvotes: 2

Related Questions