找出哪些合併表格單元格會被點擊？

Question

如果你已經合併了表格單元格，有什麼方法可以確定單擊哪個單元格位置？我們有20個單元格等合併在一起，我們想弄清楚用戶是否點擊了例如第7個單元格的內容。

我們已經合併了表示特定事物的單元格，但我們現在需要從邏輯上弄清楚單元格被用戶點擊（即使它們被合併）。

這可能嗎？

Answer 1

您可以根據同一表中未合併單元的尺寸來判斷它。下面是一個使用jQuery的例子（僅僅是因爲它比原生JS更簡潔以證明這一點）：

var $mergedTd = $('td.myMergedTd'), 
    $unmergedThs = $('th'); 

$mergedTd.click(function(e) { 
    var clickedUnmergedIndex = 0; 
    $unmergedThs.each(function(i) { 
    var $th = $(this); 
    if(e.pageX < $th.pageX + $th.width()) { 
     clickedUnmergedIndex = i; 
    } else { 
     // Stop iterating; we've found the unmerged index 
     return false; 
    } 
    }); 

    alert('You just clicked 0-based cell index #' + clickedUnmergedIndex); 
}); 

Answer 2

我會在DOM中保留該表的兩個副本。一個可見和一個隱藏。您在可見表格上單擊事件，並在合併單元格之前，將單擊的單元格標記（例如，向其添加數據屬性，指示它已標記，例如data-marked ='1'），並將該表格複製到隱藏的單元格。