javascript - 找出哪些合并的表格单元格会被点击？

Question

如果您已合并表格单元格，有什么方法可以确定单击了哪个单元格位置？我们有 20 个单元格等合并在一起，我们想知道用户是否点击了例如第 7 个单元格

我们已经合并了表示特定内容的单元格，但我们现在需要从逻辑上确定用户单击了哪个单元格（即使它们已合并）。

这可能吗？

Answer 1

您可以根据同一张表中未合并单元格的尺寸来判断它。下面是一个使用 jQuery 的示例（只是因为它比原生 JS 更简洁地证明了这一点）：

var $mergedTd = $('td.myMergedTd'),
    $unmergedThs = $('th');

$mergedTd.click(function(e) {
  var clickedUnmergedIndex = 0;
  $unmergedThs.each(function(i) {
    var $th = $(this);
    if(e.pageX < $th.pageX + $th.width()) {
      clickedUnmergedIndex = i;
    } else {
      // Stop iterating; we've found the unmerged index
      return false;
    }
  });

  alert('You just clicked 0-based cell index #' + clickedUnmergedIndex);
});

Answer 2

我会在 DOM 中保留该表的两个副本。一可见一隐。您在可见表上获取点击事件，在合并单元格之前，标记单击的单元格（例如，向其添加数据属性，表明它已被标记，例如 data-marked='1'）并将该表复制到隐藏的单元格.