Get the ID in row that has radio button checked [duplicate]

Question

I have this function which creates a table in a modal popup and the table gets populated from data in an array passed in from an ajax call. Now on the click of a button in the modal popup I need to get the value of item.TimedPathwayID that has its radio button checked and add it to a hidden field.

function PopulateTimedPathwaysTable(tblData) {
var tbody = $('#tblTimedPathways tbody');
$.map(tblData.d, function (item) {
    tr = $('<tr></tr>');
    tr.append('<td class="pathwayID">' + item.TimedPathwayID + '</td>');
    tr.append('<td>' + item.TimedPathwayName + '</td>');
    tr.append('<td><input type="radio" class="radioSelection" name="timedPathwaySelection"" />');
    tbody.append(tr);
});
$('input[name=timedPathwaySelection]:first').attr('checked', true);}
}

I've been fiddling with this kind of thing but with no joy and the radio button in the first row is checked by default so this can't really be tied to a click event if a user just accepts the default without clicking. So how can I do it please?

$('body').on('click', '.radioSelection', function () {
    var $tbl = $('#tblTimedPathways tbody');
    var $dataRow = $tbl.closest('tr');
    var id = $dataRow.find('td').eq(0).html(); 
});

Answer 1

• .closest goes up the html tree, so tbody.closest(tr) is unlikely to be what you want.
• you need to then go back down to the cell that contains the data you want.

 let $this = $(this);  //this is the radio button
 let id = $this.closest("tr").find("td.pathwayID").text();

I would also echo that I would generally add the id as an attribute to the row to remove the necessity of the find later.

//sample data
let data = {
  d: [{
      TimedPathwayID: 1,
      TimedPathwayName: "test"
    },
    {
      TimedPathwayID: 2,
      TimedPathwayName: "test"
    },
    {
      TimedPathwayID: 3,
      TimedPathwayName: "test"
    }
  ]
};

function PopulateTimedPathwaysTable(tblData) {
  var tbody = $('#tblTimedPathways tbody');
  $.map(tblData.d, function(item) {
    tr = $('<tr></tr>');
    tr.append('<td class="pathwayID">' + item.TimedPathwayID + '</td>');
    tr.append('<td>' + item.TimedPathwayName + '</td>');
    tr.append('<td><input type="radio" class="radioSelection" name="timedPathwaySelection"" />');
    tbody.append(tr);
  });
  $('input[name=timedPathwaySelection]:first').attr('checked', true);
}
//populate it
PopulateTimedPathwaysTable(data);

$('body').on('click', '.radioSelection', function () {
    let $this = $(this);  //this is the radio button
    //console.log($this);
    let id = $this.closest("tr").find("td.pathwayID").text();
    console.log(id);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tblTimedPathways">
  <tbody>
  </tbody>
</table>