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

回答

相關問題