pre-load search query to link from table and pass it to ajax

So I currently have a table that's generated by ajax and json file. The table has 3 segments, a name, an ID and the third column is a link for more details of each result.

Example of how my table looks

PATO:0001243    light blue    Details
PATO:0001246    light brown   Details
PATO:0001247    light cyan    Details

the current code I have to generate the table is:

    $.each(data.matches, function(i, item){
    var this_row_id = 'result_row_' + next_row_num++;
    $('<tr/>', {"id":this_row_id}).appendTo('tbody');
    $('<td/>', {"text":item.label}).appendTo('#'+this_row_id);
    $('<td/>', {"text":item.value}).appendTo('#'+this_row_id);
    $('<a href="./test.cgi">'+ 'Details' +'</a>').appendTo('#'+this_row_id);
});

Ideally, I would like to be able to click on the "Details" and it would pass the ID value to another ajax call and then create a dialog/modal to display the results of that ajax call.

EXAMPLE

From the list above, clicking on "Details" from the first entry will pass the values "PATO:0001234" to my "test.cgi" script which will use that value to process and spit back out a JSON for me to display in a dialog.

I'm not asking for someone to write my code for me, just some direction about how to approach this.

I think I'm probably wrong to link directly to my cgi script fr开发者_如何学Goom the <a href>. But I don't know how to link that to an ajax call from a text link.

Update
Left the page loaded too long; @floatless has posted a cleaner approach with chaining, didn't think of that.

You could change the last few lines to something like what's below. The idea is to attach a handler to each link when it's created which will call the loadDetail function with the appropriate item label. In loadDetail, it's then a simple matter of making an ajax request with the label as the parameter.

Note that you don't need to use ./test.cgi - test.cgi will suffice.

...
    $('<a href="#" id="detail_' + this_row_id +'">'+ 'Details' +'</a>').appendTo('#'+this_row_id);

    $('#detail_' + this_row_id).click(loadDetail(item.label));
}


function loadDetail(label){
    $.get('test.cgi', {label: label}, function(data){
        //create your dialog to display the response data
    });
}

You could append click event handler while generating table:

 $('<a href="./test.cgi">'+ 'Details' +'</a>').appendTo('#'+this_row_id).click(function()
 {
      $.getJSON("./test.cgi", {label: item.label}, function(data) 
      { 
          //Do something with received data
      });

      return false;
 });