CODEWITHSUNDEEP
jquery
Martin
Martin

Reputation: 13

how can i check table rows for hrefs and make them clickable, but rows with no href do nothing (using jquery)

I'm using jQuery tablesorter to add functionality to a couple of tables. I have the zebra effect and mouseover to highlight rows, and all is fine. On several rows, I have href links that are clickable, and they open the correct urls. However, and here is my problem, even the rows that have no href links are trying to open urls, and consequently throwing page errors.

This is my code for the links:

$(".tablesorter tr").click(function() {
    window.location.href = $(this).find("a").attr("href");
});

I guess I have to check rows for 'a', and if not found, then do nothing. Sounds easy, but how do I code it?!

Any help would be greatly appreciated! As you probably guessed, I am new to jQuery and programming and have begun a very steep learning curve!!!

Upvotes: 1

Views: 100

Answers (4)

FishBasketGordo
FishBasketGordo

Reputation: 23142

$(".tablesorter tr").click(function() { 
    if ($(this).find('a').length) {
        window.location.href = $(this).find("a").attr("href");
    }
});

http://api.jquery.com/find

Originally, I thought I would use contains [API ref], but this works differently than I thought. I changed my example above to use find instead.

Alternatively, you could do: 

$(".tablesorter tr").click(function() { 
    if ($(this).is(':has(a)')) {
        window.location.href = $(this).find("a").attr("href");
    }
});

Upvotes: 0

Dereleased
Dereleased

Reputation: 10087

I'll throw my hat into the ring

$(".tablesorter tr a[href]").each(function(ix,o){
    $(o).parents('tr').click(
        (function(url) {
            return function () {
                window.location.href = url;
            };
        })($(o).attr('href'))
    );
});

This will only bind to tags that actually meet your specifications; it looks for links that have an href attribute, and then binds the parent TR to a function that explicitly contains the URL, so you won't have to do any selecting during the click event. This will have a slightly longer run time initially, but will not require any selecting (or use of jQuery whatsoever) during the click event.

Of course, the times involved are pretty much trivial, so this is more of an exercise in "another way to do it" anyway. With that in mind, here's another:

$(".tablesorter tr:has(a[href])").click(function(){
    window.location.href = $('a[href]', this).attr('href'); 
});

This uses jQuery's :has() selector to, again, only match TR's you'd want to link with anyway. the :has() selector, however, is jQuery-specific, so it doesn't benefit from certain DOM methods used to speed up selecting. Again, this time should be trivial.

Hope these help!

Upvotes: 1

ShankarSangoli
ShankarSangoli

Reputation: 69915

Try this

$(".tablesorter tr").click(function() { 
    if($(this).find("a").length)
      window.location.href = $(this).find("a").attr("href"); 
});

Upvotes: 0

Jason Kaczmarsky
Jason Kaczmarsky

Reputation: 1686

The length property can get the number of elements in a parent. 

$(".tablesorter tr").click(function() { 
    //Check for any children
    if ($(this).children('a').length)//>0
        window.location.href = $(this).find("a").attr("href");
});

Upvotes: 0

Related Questions