鼠标悬停表格列时获取邻近4列文本的实现方案咨询

针对你的需求：2行10列的表格，鼠标悬停任意单元格时，需获取右侧相邻单元格、下一行同位置单元格及下一行同位置右侧单元格的文本（对应你举例的悬停第2列时，取第3、7、8列内容），以下是完整实现代码：

实现代码 #

jQuery(".sqr_wrapper tr td").hover(function() {
  // 获取当前单元格在本行的索引（从0开始计数）
  const currentColIndex = jQuery(this).index();
  const $table = jQuery(this).closest(".sqr_wrapper");
  const $secondRow = $table.find("tr").eq(1); // 定位第二行

  // 存储所有邻近单元格的文本
  const nearbySpotTexts = [];

  // 1. 获取右侧相邻单元格的文本（保留你已有的逻辑）
  const $rightCell = jQuery(this).next("td");
  if ($rightCell.length) {
    nearbySpotTexts.push($rightCell.find(".spot").text());
  }

  // 2. 获取下一行同位置单元格的文本
  const $belowSameCell = $secondRow.find("td").eq(currentColIndex);
  if ($belowSameCell.length) {
    nearbySpotTexts.push($belowSameCell.find(".spot").text());
  }

  // 3. 获取下一行同位置右侧第一个单元格的文本
  const $belowRightCell = $secondRow.find("td").eq(currentColIndex + 1);
  if ($belowRightCell.length) {
    nearbySpotTexts.push($belowRightCell.find(".spot").text());
  }

  // 此处可替换为填充预约位的业务逻辑，当前仅打印结果
  console.log("邻近预约位文本：", nearbySpotTexts);
});

关键说明 #

• 用index()获取当前单元格在本行的位置，以此精准定位下一行的对应单元格
• 通过closest()锁定当前表格容器，避免页面其他表格干扰
• 每一步都做了存在性判断（length检查），防止单元格越界报错
• 若需要包含当前悬停单元格的文本，可自行添加jQuery(this).find(".spot").text()到结果数组中

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