如何选择“ <td> &#39;并使用jquery导航到url？

Question

I am using jquery to pull football data from an api as follows

type: 'GET',
dataType: 'json',
url: "http://api.football-data.org/v1/competitions/426/teams",
processData: true,
//idLength: url.Length - url.LastIndexOf("/", StringComparison.Ordinal) - 1,
//id: url.Substring(url.LastIndexOf("/", StringComparison.Ordinal) + 1, idLength),
success: function (data, status) {
    var trHTML = '';
    $.each(data.teams, function (key, item) {
        var id = item._links.self.href;
        var indexOfLastBackSlash = id.lastIndexOf("/") + 1;
        id = id.substring(indexOfLastBackSlash);
        //$('<option>', { text: item.TeamName, id: item.ID }).appendTo('#lstTeams');
        trHTML += '<tr class="info"><td>' + item.name +
                  '</td><td>' + item.code +
                  '</td><td>' + item.shortName +
                  '</td><td>' + item.squadMarketValue +
                  '</td><td>' + item.crestURL +
                  '</td><td>' + id +
                  '</td></tr>';

I want to be able to select a 'td' and navigate to another url like " http://api.football-data.org/v1/teams/322/fixtures " for the team with id of 322. How can I do so?

Answer 1

You can create a function which will do same ajax request but this time for single record. On your target's click event you need to call that function passing the id you need to fetch records for. One way of doing this is to set a data attribute to your target container.

Below is the sample code performing similar functionality.

$(function() {
    $.ajax({
        url: 'https://jsonplaceholder.typicode.com/posts/',
        method: 'GET',
        dataType: 'json'
    }).then(function(Data) {
        $.each(Data, function (key, data) {
        var id = data.id;
        var title = data.title;
        $('.tableAllRecords').append('<tr><td><a href=# class=mylink data-id='+id+'>'+id+'</a></td><td>'+title+'</td></tr>');
      });
    });
});

function fetchSingle(id) {
    $.ajax({
        url: 'https://jsonplaceholder.typicode.com/posts/' + id,
        method: 'GET',
        dataType: 'json'
    }).then(function(data) {
        var id = data.id;
        var title = data.title;
        var body = data.body;
        $('.tableSingleRecord').append('<tr><td>'+id+'</td><td>'+title+'</td><td>'+body+'</td></tr>');
    }); 
}

$(document).on('click', '.mylink', function(e) {
    var id = $(this).data('id');
    fetchSingle(id);
    e.preventDefault(); // disabling anchor's default [redirect] behaviour
});

Here is the link to fiddle. https://jsfiddle.net/2h54vu7h/

If you need to display records on a new page, you simply have to pass id into your url and on next page you have make an ajax request getting the id variable from url .

Example: '<a href=somepage.html?id='+id+'>View Details</a>';