html表格选择与colspan或rowspan

我有一个表，用户可以用鼠标选择行和列，然后将选定的区域合并到一个单元格中，它的工作原理就像ms单词表的行为一样。html表格选择与colspan或rowspan

但是，当表具有rowSpan或colSpan时，所选区域不是常规矩形，所以我想将选择扩展为常规矩形以便稍后合并。

这里是rowspan和colspan的例子，当选择不包括td有rowspan时，它工作正常，否则，选择是错误的。当你有colspan > 1，因为小区更换后的cellIndex值的细胞来调整由前一小区采取的colspan细胞

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

来源

2014-01-06 iceshi

复杂的问题...我现在不会尝试： –

不错的问题。正如RaviH所指出的那样，这里的问题是当单元格中有colspan/rowspan的单元格时，单元格的'cellIndex'属性会给出误导性的值。见http://stackoverflow.com/questions/10966687/how-can-i-find-each-table-cells-visual-location-using-jquery/10967488#10967488 – tewathia

我找到了原因，现在我用了一个名为cellPos的jquery插件来解决cellIndex问题。但是，仍然存在一个问题，选区可能是不规则的矩形。看到下面的图片。

第一图像显示在选择区域中，箭头所示的方向鼠标。第二张图片显示了我真正在做什么。

来源

2014-01-07 03:24:57 iceshi

选择出错。看到下面的图片。

Table structure

这是当你按下鼠标按下在小区的左上角与colspan=2并拖动鼠标到第三排（红线表示）你的选择逻辑做什么：

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

来源

2014-01-06 05:13:47 RaviH

html表格选择与colspan或rowspan

回答

相关问题