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,开发者_StackOverflow 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!!!
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!
$(".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");
}
});
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");
});
Try this
$(".tablesorter tr").click(function() {
if($(this).find("a").length)
window.location.href = $(this).find("a").attr("href");
});
精彩评论