javascript cell selection

Question

Hi,

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?

thx ...

Answer 1

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?

Answer 2

I extended it and got the first id. Here is the code:

function getSelectedCells() { selObj = window.getSelection(); anchor = selObj.anchorNode;
parent = anchor.parentNode; selId = parent.getAttribute("id"); alert(selId); }

This function delivers now the first id of the selected range of cells. How do I access the others?

Answer 3

I set up a test for solving this using jQuery because honestly it just makes it easier. The method I used was to iterate over the possible items and check if they are inside the range.

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;

this likely isn't the best solution but it might get us moving in the right direction.

Answer 4

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

}