使用colspan或rowspan的html表选择 [英] html table selection with colspan or rowspan

问题描述

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

I have a table which user can select rows and columns with mouse and then merge the selected area into one cell, it works just like ms word table's behaviors.

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

However, when the table have rowSpan or colSpan, the selected area are not regular rectangle, so I'd like to extend the selection to an regular rectangle for the later mergence.

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

here is the example with rowspan and colspan, when the selection does not include the td has rowspan, it works fine, otherwise, the selection is wrong.

$('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/

推荐答案

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

I have found the reason and now I used a jquery plugin named cellPos to solve the cellIndex problem. However, there still a problem, the selection area can be non-regular rectangle. see the image below.

第一张图片显示选择区域，箭头表示鼠标方向。
第二张图片展示了我真正想要的东西。

the first image show the selection area, the arrow indicated the mouse direction. the second image show what I really what.

这篇关于使用colspan或rowspan的html表选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！