Clickable table row that makes request

Hi all,

I am using a popup to display JSON data dynamically in a table. For example:

$$(document).on('popup:opened', '.popup-loadResults', function (e) {;
  app.request.json('my-URL', function (data) {
    var tableHtml = '';
      for(var i = 0; i < data.length; i+=1){
        tableHtml+= '<tr><td class="numeric-only">' +data[i].brand+ '</td></tr>';        
    $$('.data-table #resultsTable').html(tableHtml);

From the above example, each entry in the JSON url is displayed in a table row by a brand field (data[i].brand). I would like to further this by making each row clickable, and once clicked a new json request is created using a field from the original json (data[i].api).

this has nothing to do with F7;

$$('.data-table #resultsTable tr').on('click', e => {
  // Find here your td and make your request.

Thanks, I realise now that this actually doesn’t have much to do with Framework7. However thanks for your answer, it definitely helped. I ended up adding an ID to the row when building the table:

tableHtml+= '<tr id="' +data[i].regnumber+ '"> ..   


I was hoping to get this ID when the row is clicked using:

$$('.data-table #resultsTable tr').on('click', e => {        
    var zaf = $$('.data-table #resultsTable tr').attr("id");

It kind of works, but the console keeps logging the ID of the first row regardless of which row is clicked. I think I need to use a loop but I just cant seem to get it working.

I finally got this working. I wasn’t too far off :grin:

$$('.data-table #resultsTable tbody tr').on('click', function (e) {
  var zaf = $$(this).closest('tr').attr('id');
1 Like