Search code examples
javascriptselectioncell

javascript cell selection


I want to select a cell range in an HTML table and using Javascript to change the background color of the selected cells. Is there an event to get all ids of the selected cells?


I tried this code:

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

And it printed out the cell content of the selected cells. Does anyone know how i can use this to get the id of the selected cells?


Solution

  • I will try your approach. I found a solution myself but it is far from pretty and only because I know how the ids of the cells are structured. Here is the code but it only works sometimes. I guess the regular expression is a little buggy. I use this to avoid changing the background from the wrong cells:

    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]);
                }   
            }
        }
    }