如何用JQuery获取弹窗中表格td的值？调用popupClick()返回undefined

嘿，我来帮你排查这个问题！你遇到的核心问题是内联点击事件里的this指向错误，导致无法正确定位到表格行和单元格。下面给你两种可行的解决方案：

方案一：修改内联调用，传递触发元素 #

当你用onclick='popupClick();'调用函数时，函数内部的this默认指向window对象，而不是点击的<td>。我们可以把触发事件的DOM元素直接传给函数：

1. 修改生成表格行的代码，把onclick改为传入this：

var rows = "<tr>" + 
           "<td class='smartresultId' onclick='popupClick(this);'><a href='#'>" + jsonResult.ClaimSummaryId + "</a></td>" + 
           "<td>" + jsonResult.PatientName + "</td>" + 
           "<td>" + jsonResult.PayorName + "</td>" + 
           "<td>" + jsonResult.ClientDemographicMasterID + "</td>" + 
           "<td>" + jsonResult.AmountPaid + "</td>" + 
           "</tr>";

2. 调整popupClick函数，接收传入的元素并使用它：

function popupClick(element) {
  // 用传入的element代替原来的this，定位到对应的行和单元格
  const claimSummaryID = parseInt($(element).closest("tr").find("td").eq(0).text().trim());
  alert(claimSummaryID);
  var obj = { claimSummaryID: claimSummaryID };
  // 这里可以继续处理obj的业务逻辑
}

小提示：用text()代替html()能避免获取到<a>标签的冗余内容，trim()可以清除字符串前后的空格，确保转换数字准确。

方案二：使用事件委托（更推荐） #

内联事件绑定不仅容易出现this指向问题，还不利于动态生成元素的事件管理。推荐用事件委托的方式绑定事件，这样即使是AJAX动态添加的表格行也能正常触发事件：

1. 去掉生成表格行时的onclick属性，简化代码（推荐用ES6模板字符串，拼接更清晰不易出错）：

const rows = `
<tr>
  <td class='smartresultId'><a href='#'>${jsonResult.ClaimSummaryId}</a></td>
  <td>${jsonResult.PatientName}</td>
  <td>${jsonResult.PayorName}</td>
  <td>${jsonResult.ClientDemographicMasterID}</td>
  <td>${jsonResult.AmountPaid}</td>
</tr>
`;

2. 在页面初始化或AJAX请求成功后，给表格绑定事件委托：

// 可以放在$(document).ready()里，或者btnSmartResult的success回调末尾
$(document).on('click', '.smartresultId', function() {
  // 这里的this就是触发点击的<td>元素
  const claimSummaryID = parseInt($(this).closest("tr").find("td").eq(0).text().trim());
  alert(claimSummaryID);
  var obj = { claimSummaryID: claimSummaryID };
  // 处理后续业务逻辑
});

事件委托的优势在于：只需要绑定一次事件，就能作用于所有现有和未来动态生成的.smartresultId元素，代码更整洁，也避免了内联事件的各种坑。

内容的提问来源于stack exchange，提问作者karthisena