jQuery点击表格行获取TD ID时出现undefined错误求助

嘿，这个问题我太熟了！你遇到的弹窗为空、控制台显示undefined的问题，根源出在箭头函数的this指向上面，下面给你一步步拆解原因和解决方案：

问题原因 #

你在$("td").click()里用了箭头函数(e) => {}，箭头函数不会绑定自己的this，它的this会继承自外层的作用域（也就是chooseCell函数的this），而不是触发点击事件的<td>元素。所以$(this)根本不是指向你点击的单元格，自然拿不到id属性，返回undefined。

解决方案 #

这里有几种靠谱的解决方式，你可以根据需求选：

1. 把箭头函数改成普通函数 #

普通函数的this会自动指向触发事件的DOM元素，也就是你点击的<td>，这样就能正常获取id了：

function chooseCell() {
  let square = 0;
  let squareNumber = 0;
  $("td").click(function(e) { // 替换箭头函数为普通函数
    let data = $(this).attr('id');
    alert(data);
    // 后续你的循环逻辑，注意把&am改成&&哦，应该是打错了
    for (square in squarePositions) {
      squareNumber += 1;
      if (square[1] <= e.pageX && e.pageX <= square[3] && ...) {
        // 你的业务逻辑
      }
    }
  });
}

2. 使用事件对象的target或currentTarget #

如果你不想改箭头函数，可以用事件参数e里的元素来获取点击的单元格：

• e.target：点击的实际元素（如果td里有子元素，比如<span>，点击子元素时target就是这个子元素）
• e.currentTarget：绑定事件的元素（永远是<td>，不管你点击的是td本身还是它的子元素）

示例代码：

function chooseCell() {
  let square = 0;
  let squareNumber = 0;
  $("td").click((e) => {
    // 方法A：用currentTarget（推荐，确保拿到的是绑定事件的td）
    let data = $(e.currentTarget).attr('id');
    // 方法B：如果td有子元素，用closest确保拿到父级td
    // let data = $(e.target).closest('td').attr('id');
    alert(data);
    // 后续循环逻辑
    for (square in squarePositions) {
      squareNumber += 1;
      if (square[1] <= e.pageX && e.pageX <= square[3] && ...) {
        // 你的业务逻辑
      }
    }
  });
}

另外注意你代码里的&am应该是&&的笔误，这个也要修正，不然条件判断会出错哦～

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