获取选中单选按钮的行中的 ID [重复]

Question

我有这个函数，它在模式弹出窗口中创建一个表，并且该表是从从 ajax 调用传入的数组中的数据填充的。现在，单击模式弹出窗口中的按钮，我需要获取 item.TimedPathwayID 的值，该值已选中其单选按钮并将其添加到隐藏字段。

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);}
}

我一直在摆弄这种事情，但没有任何乐趣，并且默认情况下会检查第一行中的单选按钮，因此如果用户只接受默认值而不点击，则它不能真正与点击事件相关联.那请问我该怎么做呢？

$('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 上升到 html 树，所以 tbody.closest(tr) 不太可能是你想要的。
• 然后您需要返回到包含所需数据的单元格。

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

我还要回应说，我通常会将id 作为属性添加到行中，以消除以后查找的必要性。

//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>