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