相关疑难解决方法(0)

我有一个包含ROWSPAN和COLSPAN的HTML表.

如何使用jQuery找到每个单元格的"可视位置"？

例如,这是我的表的可视化表示,其中每个单元格填充了"视觉位置"算法应返回的内容:(
注意:我只关心其中的单元格<tbody>,列引用可以是整数,而不是字母字符,我只是这样做才能轻松突出问题)

+--+--+--+--+--+
|  |A |B |C |D |
+--+--+--+--+--+
|1 |A1|B1   |D1|
+--+--+--+--+  +
|2 |A2   |C2|  |
+--+     +--+  +
|3 |     |C3|  |
+--+--+--+--+--+
|4 |A4|B4|C4|D4|
+--+--+--+--+--+
|XYZ           |
+--+--+--+--+--+

我已尝试实现第一个,但是单元格C3的引用是不准确的,因为它没有考虑ROWSPANS.第二个链接可以合并到第一个的解决方案,但我无法弄清楚如何.

• 在jQuery中使用表| 我的科技世界
• 检索受"rowspan"影响的行列的最有效方法是什么？- 堆栈溢出

我希望将此作为一个函数调用getCellLocation(cell),它将返回一个返回类似于以下位置的关联数组:

function getCellLocation(cell)
{
  var row_number = parseInt($(cell).parent().prevAll().length) + 1;
  var col_number = 1;
  $(cell).prevAll('td').each(function() {
      col_number += $(this).attr('colspan') ? parseInt($(this).attr('colspan')) : 1;
  });

  var location = new Array();
  location['row'] = row_number;
  location['col'] = col_number;
  location['index'] …

我希望能够按行和列索引选择表格单元格，同时补偿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. 当滚动、边距等起作用时不能可靠地工作；一般脆弱；宁愿不依赖坐标数学。