Sélection de cellule javascript

Question

Je souhaite sélectionner une plage de cellules dans un tableau HTML et utiliser JavaScript pour modifier la couleur d'arrière-plan des cellules sélectionnées. Y at-il un événement pour obtenir tous les identifiants des cellules sélectionnées?

---

J'ai essayé ce code:

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

Et imprimer le contenu cellulaire des cellules sélectionnées. Est-ce que quelqu'un sait comment je peux utiliser cela pour obtenir l'identifiant des cellules sélectionnées?

Answer 1

Je vais essayer votre approche. J'ai trouvé une solution moi-même mais c'est loin d'être joli et seulement parce que je sais comment les identifiants des cellules sont structurés. Voici le code mais ça ne marche que parfois. Je suppose que l'expression régulière est un peu buggy. J'utilise ceci pour éviter de changer l'arrière-plan des mauvaises cellules:

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

Answer 2

J'ai mis en place un test pour résoudre ce problème en utilisant jQuery car honnêtement, cela le rend plus facile. La méthode que j'ai utilisée était d'itérer sur les éléments possibles et de vérifier s'ils sont à l'intérieur de la gamme.

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; 

Ce n'est probablement pas la meilleure solution, mais cela pourrait nous aider à avancer dans la bonne direction.