2

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.

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.

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/

iceshi
  • 45
  • 4
  • complex question... I won't try it now :| – Siva Tumma Jan 06 '14 at 05:25
  • Nice question. The problem here, as pointed out by RaviH, is that the `cellIndex` property of a cell gives misleading values when there are cells with colspan/rowspan inside the table. See http://stackoverflow.com/questions/10966687/how-can-i-find-each-table-cells-visual-location-using-jquery/10967488#10967488 – tewathia Jan 06 '14 at 06:41

2 Answers2

1

Selection goes wrong when you have a cell with colspan > 1 because the cellIndex value of the cells after that cell change to adjust for the colspan taken by the previous cell. See the the image below.

Table structure

This is what your cell selection logic does when you press the mouse down at top left corner of the cell with colspan=2 and drag mouse down to 3rd row (indicated by the red line):

  1. Mouse down on top left corner of cell with colspan=2. Take the cellIndex and rowIndex value of the cell where selection started. Begin cellIndex=2 and rowIndex=0.
  2. Drag the mouse down to 3rd row (indicated by the red line). Ending cellIndex=2 and rowIndex=2
  3. Select cells between and including begin [cellIndex,rowIndex] and end [cellIndex,rowIndex]. In this case select cells [2,0],[2,1],[2,2]. That is where the problem is! Cell [2,1] has moved to the next column to adjust for the previous cell with colspan=2. Though that cell's cellIndex value is 2, you should treat it as if its cellIndex value is 3 and exclude it from selection.
RaviH
  • 3,544
  • 2
  • 15
  • 14
0

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.

iceshi
  • 45
  • 4