使用colspan或rowspan的html表选择

Question

我有一个表，用户可以用鼠标选择行和列，然后将选定的区域合并到一个单元格中，就像ms word table的行为一样。

但是，当表格中包含rowSpan或colSpan时，所选区域不是常规矩形，因此我想将选区扩展为常规矩形，以便以后合并。

这里是rowspan和colspan的例子，当选择不包括td有rowspan时，它工作正常，否则，选择是错误的。

$('td').mousedown(function () {
    $(this).closest('table').find('td').removeClass('selected');
    var start = {
        x: this.cellIndex,
        y: this.parentNode.rowIndex
    }
    $(this).closest('table').find('td').mouseover(function () {
        var x1 = Math.min(start.x, this.cellIndex);
        var y1 = Math.min(start.y, this.parentNode.rowIndex);
        var x2 = Math.max(start.x, this.cellIndex);
        var y2 = Math.max(start.y, this.parentNode.rowIndex);

        $(this).closest('table').find('td').each(function () {
            var x = this.cellIndex;
            var y = this.parentNode.rowIndex;
            if (x >= x1 && x <= x2 && y >= y1 && y <= y2) {
                $(this).addClass('selected');
            } else {
                $(this).removeClass('selected');
            }
        });
    });
    var self = this;
    $(document).mouseup(function () {
        $(self).closest('table').find('td').unbind('mouseover');
        $(document).unbind('mouseup');
    });
});

http://jsfiddle.net/uRd87/3/

Answer 1

当您拥有colspan > 1的单元格时，选择会出错，因为该单元格后的单元格的cellIndex值会更改以调整前一个单元格所占用的colspan。请参见下图。

这是您使用colspan=2在单元格的左上角按下鼠标并将鼠标向下拖动到第3行（由红线表示）时单元格选择逻辑的作用：

1. 使用colspan=2将鼠标放在单元格的左上角。获取选择开始的单元格的cellIndex和rowIndex值。从cellIndex=2和rowIndex=0开始。
2. 将鼠标向下拖动到第3行（由红线表示）。结束cellIndex=2和rowIndex=2
3. 选择包括开始[cellIndex,rowIndex]和结束[cellIndex,rowIndex]之间的单元格。在这种情况下，请选择单元格[2,0]，[2,1]，[2,2]。这就是问题所在！单元格[2,1]已移至下一列，以使用colspan=2调整上一个单元格。虽然该单元格的cellIndex值为2，但您应该将其视为cellIndex值3，并将其从选择中排除。

Answer 2

我找到了原因，现在我使用名为cellPos的jquery插件来解决cellIndex问题。 但是，仍然存在问题，选择区域可以是非规则矩形。见下图。

第一个图像显示选择区域，箭头指示鼠标方向。 第二张图片显示了我真正的想法。