Hi all,
Really hoping someone can help me here. I am still a JS newbie and have been struggling with this for the last two days! This is for a mobile app built using Framework7.
I am dynamically building a html table with JSON data, and I am trying to get the row ID when a row of the table is clicked on. So far my code is as follows (I have included comments):
//Do something when button is clicked
$$('.page-content').find('#airconSearch').on('click', function (e) {
//Show preloader
app.preloader.show();
//Request JSON data
app.request.json('my-URL', function (data) {
var tableHtml = '';
for(var i = 0; i < data.length; i+=1){
//Use JSON data to give each row an ID and populate the 3 columns
tableHtml+= '<tr id="' +data[i].am_5_regnumber+ '"><td class="numeric-only">' +data[i].brand+ '</td> <td class="numeric-only">' +data[i].model+ '</td> <td class="numeric-only">' +data[i].ac_31_eeclassc+ '</td></tr>';
}
//Add the columns to the html table
$$('.data-table #airconList').html(tableHtml);
//Hide preloader after function is complete
app.preloader.hide();
//Do something when a table row is clicked
$$('.data-table #airconList tr').on('click', e => {
//Get the clicked row ID
var zaf = $$('.data-table #airconList tr').attr("id");
//Log the ID to the console
console.log(zaf);
})
})
})
The dynamic table builds with no issues and the console shows that each row has an ID:
However when I click on any row in the table, the console keeps logging the ID for the first row. Does anyone have a possible for solution for this? I am not sure if I need some sort of loop but I am not winning unfortunately.
Thanks