在补偿 rowspan 和 colspan 的同时按行和列选择表格单元格

Question

我希望能够按行和列索引选择表格单元格，同时补偿rowspan和colspan。例如，在下表中，

我希望将 (1,2) 红色、(2,3) 绿色和 (3,3) 蓝色着色为：

我尝试了这个问题的答案，“按行号和列号选择表格中的任意单元格”，但这产生了：

这是 jsFiddle：http://jsfiddle.net/acheong87/27HuN/

我明白发生了什么，我什至发现了另一个问题，“Table cellIndex and rowIndex with colspan/rowspan”，其中的答案是作为插件提供的，但似乎令人难以置信的是，没有更简单的方法！毕竟，实际结果的着色似乎可以理解，但并不直观，而预期结果的着色似乎更直观且易于掌握。

谁能想到一种聪明而简单的方法来实现这一点？

---

更新

这是我（糟糕的）尝试的新 jsFiddle，以防它可能激发其他人的新想法。基本上，如果我们假设 row 和 col 标题没有跨越（当然，这不是一个有效的假设），那么我们可以使用偏移量来“定位”正确的单元格：

function getCell(table, r, c)
{
    var rowHead = $(table.rows[r].cells[0]);
    var colHead = $(table.rows[0].cells[c]);
    var y = rowHead.offset().top + rowHead.outerHeight(true)/2;
    var x = colHead.offset().left + colHead.outerWidth(true)/2;
    return $(document.elementFromPoint(x, y));
}

虽然演示似乎有效，但存在许多问题：

1. 不能假设行和列标题没有跨越。
2. 如果行或列的中点不在视口中，则不起作用；elementFromPoint似乎取决于视口。
3. 当滚动、边距等起作用时不能可靠地工作；一般脆弱；宁愿不依赖坐标数学。

Answer 1

这是一种进行“预处理”的不同方法：

var grid = (function(){

  var table = $("#table")[0], a=[], cell, i, j, k, l, y;

  for (i=0;i<table.rows.length;i++) a[i] = [];

  for (i=0;i<table.rows.length;i++) {
      y = 0;
      for (j=0;j<table.rows[i].cells.length;j++) {
          while (a[i][j + y]) y++;
          cell = $(table.rows[i].cells[j]);
          xspan = parseInt(cell.attr('rowspan') || 1);
          yspan = parseInt(cell.attr('colspan') || 1);
          for (k=0;k<xspan;k++) {
              for (l=0;l<yspan;l++) {
                  if(i + k < table.rows.length) a[i + k][j + y + l] = [i,j];
              }
          }
      }
  }

  return a;

})();

colorCell(1,2,'red');
colorCell(2,3,'green');
colorCell(3,3,'blue');

function colorCell(i,j,s){
    var a = grid[i][j];
    $(table.rows[a[0]].cells[a[1]]).css('background-color', s);
}

jsfiddle