CODEWITHSUNDEEP
jqueryhtml
Kuthay Gumus
Kuthay Gumus

Reputation: 764

JQuery : If Contains Given String then Direct to Related Page

i have a small project. On this project. I have table which contains football league names. All 's on table are links. On clicking one of these links, i need to direct my page to related league table. For example;

if i have clicked premier league from my table, i need to direct my page to premier league table page.

I've written small code but it didnt work.

$(function() {
var tableRow = $("td").filter(function() {
return $(this).text() == "Premier League";
})
window.location.href = "RELATEDURL";
});

Can anyone help me about it please ? Thank you.

Edit 1 : I get the names of the league with this method. I need to apply to this format.

$(document).ready(function() { 
$.getJSON("getleaguetablesURL",function(data) {
console.log(data);
$.each(data, function(index, value) {
$('#leaguetable').append("<tr><td class='team'><a href='#'>"
+value.Name+"</a></td></tr>");
});
$('#leaguetable').listview('refresh');
})
});

Upvotes: 0

Views: 100

Answers (2)

Stefan
Stefan

Reputation: 1106

You can always use jQuery, although keep in mind that if the user has its javascript turned off this won't work.

Edited the fiddle example above to the following:

jsFiddle

See if that works for ya.

Upvotes: 0

Daniel Imms
Daniel Imms

Reputation: 50209

I suggest using <a> tags instead of JavaScript. You can use some CSS to stretch an <a> to the size of a <td> so the whole cell can be clicked.

jsFiddle

HTML

<table>
    <tr>
        <td>
            <a href="/premierleague.htm">Premier league</a>
        </td>
    </tr>
    <tr>
        <td>
            <a href="/anotherleague.htm">Another league</a>
        </td>
    </tr>
</table>

CSS

a {
    display:block;
    width:100%;
    height:100%;
    padding:2px;
}

table {
    width:300px;
}

td {
    border:1px solid #000;
    padding:0;
}

EDIT: Since you're getting your league names from JSON you can simply fill in the anchor href there.

$(document).ready(function() { 
    $.getJSON("getleaguetablesURL",function(data) {
        console.log(data);
        $.each(data, function(index, value) {
            var url = "RELATEDURL";
            $('#leaguetable').append("<tr><td class='team'>" +
                "<a href='" + url + "'>" +
                value.Name+"</a></td></tr>");
        });
        $('#leaguetable').listview('refresh');
    })
});

Upvotes: 2

Related Questions