javascript單元格選擇

我想在HTML表格中選擇一個單元格區域並使用Javascript更改所選單元格的背景顏色。是否有事件可以獲取所選單元格的所有ID？javascript單元格選擇

我嘗試這樣做的代碼：

function getSelectedCells() 
{ 
    selObj = window.getSelection(); 
    alert(selObj); 
}

它打印出所選擇的細胞的細胞內容。有誰知道我可以如何使用它來獲取選定單元格的ID？

來源

2010-07-01 user366121

你的意思是用鼠標或其他東西選擇？您究竟在想什麼類型的用戶交互？ – Pointy 2010-07-01 12:09:13

是的。例如，選擇第一行中的前5個單元格。我在單元格中有一個默認的字符串值。這個字符串然後突出顯示。然後，我想單擊一個按鈕，該按鈕將觸發該功能以更改所選單元格的背景顏色。 – user366121 2010-07-01 13:57:30

我試過這個代碼： function getSelectedCells（） { selObj = window.getSelection（）; alert（selObj）; } 並打印出所選單元格的單元格內容。有誰知道我可以如何使用它來獲取選定單元格的ID？ – user366121 2010-07-01 15:11:16

我會試試你的方法。我自己找到了一個解決方案，但它遠非漂亮，只是因爲我知道單元格的ID是如何構造的。這裏是代碼，但它只有時有效。我猜正則表達式是一個小錯誤。我用這個來避免從錯誤的單元格中改變背景：

function foo() 
{ 
    selecIds = new Array(); 

    sel = window.getSelection(); 

    firstPosSelA = sel.anchorNode; 
    lastPosSelF = sel.focusNode; 

    firstCellId = firstPosSelA.parentNode.getAttribute("id"); 
    lastCellId = lastPosSelF.parentNode.getAttribute("id"); 

    startSelNumInd = firstCellId.indexOf("wc"); 
    endSelNumInd = lastCellId.indexOf("wc"); 

    startSelNum = firstCellId.substring(startSelNumInd + 2); 
    endSelNum = lastCellId.substring(endSelNumInd + 2); 
    firstSelecRow = firstCellId.substring(0, startSelNumInd + 2); 

    for (i = startSelNum; i <= endSelNum; i++) 
    { 
     cellid = firstSelecRow + i; 
     selecIds.push(cellid); 
    } 

    alert(selecIds); 

    for (eachSelCell in selecIds) 
    { 
     currentElement = document.getElementById(selecIds[eachSelCell]); 
     backColor = currentElement.style.backgroundColor; 

     if (backColor !='' || backColor!='#C0C0C0' || backColor!='#c0c0c0' || backColor!='rgb(192, 192, 192)' || backColor!='RGB(192, 192, 192)') 
     { 
      if (/\d\w/.test(selecIds[eachSelCell]) || (/fc/.test(selecIds[eachSelCell]))) 
      { 
      } 
      else 
      { 
       changeBackgroundColor(selecIds[eachSelCell]); 
      } 
     } 
    } 
}

來源

2010-07-02 08:05:30 user366121

如果您知道ID的結構，那麼在您的設計中使用該知識會更合適。我建議的機槍方法只適用於你只知道你選擇的元素範圍的類型（或者沒有id的情況）。 – Gabriel 2010-07-04 20:35:20

我使用jQuery建立了一個解決這個問題的測試，因爲老實說，它使得它更容易。我使用的方法是迭代可能的項目，並檢查它們是否在範圍內。

function display() { 
    if (document.getSelection) { 
    var str = document.getSelection(); 
    } else if (document.selection && document.selection.createRange) { 
    var range = document.selection.createRange(); 
    var str = range; 
    } else { 
    var str = 0; 
    } 
    if(str != 0){ 
    $("td").each(function() { 
    var range, sourceRange, compare; 
    range = str.getRangeAt(0); 
    sourceRange = document.createRange(); 
    sourceRange.selectNode(this); 
    compare = range.compareBoundaryPoints(Range.START_TO_END, sourceRange) * range.compareBoundaryPoints(Range.END_TO_START, sourceRange); 
    if (compare == -1){ 
      alert(this.id); 
    } 
    /* 
    if you really just want to change the background color, uncomment this code: 
    */ 
    /* 
    if (compare == -1){ 
      $(this).css("background", "#f00");// or any other color here. 
    } 
    */ 
    }); 
); 
} 

if (window.Event) 
    document.captureEvents(Event.MOUSEUP); 
document.onmouseup = display;

這可能不是最好的解決方案，但它可能會讓我們朝着正確的方向前進。

來源

2010-07-02 05:31:29 Gabriel

我試過了，螢火蟲發送消息$（「td」）沒有定義 – user366121 2010-07-02 08:18:10

我必須包含jquery庫才能正常工作嗎？ – user366121 2010-07-02 08:18:42

在包含jquery 1.4.2之後，我得到了消息str.getRangeAt（0）不是一個函數。 – user366121 2010-07-02 08:25:22

javascript單元格選擇

回答

相關問題