Mise en surbrillance d'une table correctement Malgré les attributs rowspan et colspan - SANS jQuery

Question

Grâce à certains #! $ # @ Dans un autre département qui a écrit du code, je ne peux pas utiliser la bibliothèque jQuery - malgré mon fervent désir de le faire. Leur logiciel a déjà été publié dans le monde, et je dois être compatible.

============================================

J'essaie de mettre en évidence une table. Comportement souhaité:

1. En cliquant sur une cellule dans le corps met en surbrillance la ligne.
2. En cliquant sur une cellule dans la tête met en surbrillance la colonne.
3. Si une colonne et une ligne sont toutes les deux en surbrillance, l'intersection est mise en surbrillance d'une couleur différente (super-surbrillance).
4. Cliquer sur une cellule précédemment surlignée pour désactiver les hautes lumières.

Ce comportement est assez simple avec une table de base, mais quand rowspans et colspans commencent à élever leurs têtes hideuses, les choses commencent à devenir un peu bancale ... mettant en lumière la cellule [5], par exemple, ne fonctionne de manière fiable. Ma pensée, afin d'accélérer le temps d'exécution de la surbrillance elle-même (en changeant un nom de classe), est de pré-calculer les 'décalages' de toutes les cellules - avec un 'colStart' et 'colEnd', 'rowStart 'et' rowEnd 'lorsque la page se charge et stockent cela dans un tableau en quelque sorte.

La question: Comment mettriez-vous en œuvre cette fonctionnalité? Je suis assez rouillé à mon JavaScript, terriblement rudimentaire dans mes compétences en programmation et bénéficierait grandement de quelques conseils.

Merci,

Scott.

Answer 1

Si les raisons de ne pas pouvoir utiliser jQuery sont techniques (par exemple quelqu'un utilise $ pour quelque chose de stupide), vous pouvez essayer le mode noConflict de jQuery. Je voulais juste que vous le sachiez =)

Votre système de précalcul semble me fonctionner, sinon.

Answer 2

J'ai fait un script qui détecte les en-têtes et des sous-en-têtes avec colspans, mais sans rowspans dans les lignes de la table:

jQuery('#yourTable tbody td').bind('click',function(e) { 
var tr = jQuery(e.target).parent('tr'); 
var y = parseInt(jQuery('tr', this).index(tr)); 
var x = parseInt(tr.children('td').index(jQuery(e.target))); 
var jTdFecha = tr.find('td:first'); 
var sFecha = jTdFecha.text(); 
var arrCeldas = {}; 
var arrEncabezados = {}; 
var arrJFila = {}; 
var nTemp = 0; 
var jTdEncabezadoFecha,nCantCabeceras,jTemp, nI, nJ, nK, nL, bTemp; 

arrJFila[1]={ 
    'arrHijos' : jQuery('#yourTable tbody tr:first-child') 
}; 
jTdEncabezadoFecha = arrJFila[1]['arrHijos'].find('td:first'); 
nCantCabeceras = jTdEncabezadoFecha.attr('rowspan'); 
for(nI=1;nI<=nCantCabeceras;nI++){ 
    if(nI>1){ 
     arrJFila[nI]={ 
      'arrHijos' : arrJFila[nI-1]['arrHijos'].next() 
     }; 
    } 
    arrCeldas[nI] = { 
     'arrHijos'  : arrJFila[nI]['arrHijos'].children(), 
     'arrColspan' : {}, 
     'arrRowspan' : {}, 
     'nCant'   : '', 
     'arrLastIndex' : {}, 
     'arrLastSavedColspan': {}, 
     'arrLastColspan': {} 
    }; 
    for(nJ=0;nJ<=nCantCabeceras;nJ++){ 
     arrCeldas[nI]['arrLastIndex'][nJ] = 0; 
     arrCeldas[nI]['arrLastColspan'][nJ] = 0; 
     arrCeldas[nI]['arrLastSavedColspan'][nJ] = 0; 
    } 
} 
for(nI=1;nI<=nCantCabeceras;nI++){ 
    arrCeldas[nI]['nCant'] = arrCeldas[nI]['arrHijos'].length; 
    nTemp = 0; 
    for(nJ=0;nJ<arrCeldas[nI]['nCant'];nJ++){ //Recorremos todas las celdas de cada cabecera 
     jTemp = jQuery(arrCeldas[nI]['arrHijos'][nJ]); 
     arrCeldas[nI]['arrColspan'][nJ] = parseInt(jTemp.attr('colspan')); 
     arrCeldas[nI]['arrRowspan'][nJ] = parseInt(jTemp.attr('rowspan')); 
     if(nI>1){ 
      for(nK=1;nK<nCantCabeceras;nK++){ 
       arrCeldas[nI]['arrLastColspan'] = arrCeldas[nI]['arrLastColspan']; 
       if (nI-nK>0){ 
        //Recorremos las cabeceras anteriores 
        bTemp = nK==1?true:((arrCeldas[nI]['arrLastColspan'][nK]<=arrCeldas[nI]['arrLastColspan'][nK-1])); 
        if(bTemp){ 
         if(nI-nK==1){ 
          bTemp = (arrCeldas[nI]['arrLastColspan'][nK]<nTemp); 
         } 
        } 
        //console.warn('nI: '+nI+' nK: '+nK+' arrLastColspan[nK='+nK+']:'+arrCeldas[nI]['arrLastColspan'][nK]+' arrLastColspan[nK-1='+(nK-1)+']:'+arrCeldas[nI]['arrLastColspan'][nK-1]); 
        if(bTemp){ 
         for(nL=arrCeldas[nI]['arrLastIndex'][nK];nL<arrCeldas[nK]['nCant'];nL++){ 
          if((parseInt(arrCeldas[nK]['arrRowspan'][nL])<=1) || isNaN(parseInt(arrCeldas[nK]['arrColspan'][nL]))){ 
           arrCeldas[nI]['arrLastIndex'][nK] = nL + 1; 
           if(isNaN(parseInt(arrCeldas[nK]['arrColspan'][nL]))==false){ 
            if((arrCeldas[nI]['arrLastColspan'][nK]<=arrCeldas[nI]['arrLastSavedColspan'][nK-1]) || (nK==1)){ 
             arrCeldas[nI]['arrLastColspan'][nK] += arrCeldas[nK]['arrColspan'][nL]; 
            } 
           } 
           break; 
           nL = 999999; //salimos del FOR. 
          } 
          if(nL!= 999999){ 
           if(isNaN(parseInt(arrCeldas[nK]['arrColspan'][nL]))==false){ 
            if(arrCeldas[nI]['arrLastColspan'][nK]<=arrCeldas[nI]['arrLastSavedColspan'][nK-1]){ 
             arrCeldas[nI]['arrLastColspan'][nK] += arrCeldas[nK]['arrColspan'][nL]; 
            } 
            nTemp += arrCeldas[nK]['arrColspan'][nL]; 
           } 
          } 
          //console.warn(isNaN(parseInt(arrCeldas[nK]['arrColspan'][nL]))+':'+parseInt(arrCeldas[nK]['arrColspan'][nL])+' nI:'+nI+' nL:'+nL+' nK:'+nK+' text: '+jQuery(arrCeldas[nK]['arrHijos'][nL]).text()+' arrLastColspan[nK='+nK+']:'+arrCeldas[nI]['arrLastColspan'][nK]+' arrLastIndex[nK='+nK+']:'+arrCeldas[nI]['arrLastIndex'][nK]); 
         } 
        } 
       } 
      } 
      //console.warn('nI: '+nI+' nJ: '+nJ+' pre: x:'+x+' nTemp:'+ nTemp); 
      if(x<=(nTemp-1)){ 
       arrEncabezados[nI] = ''; 
       break; 
       nJ = 999999; //salimos del FOR. 
      } 
     } 
     if(nJ!= 999999){ 
      nTemp += arrCeldas[nI]['arrColspan'][nJ]; 
      if(x<=(nTemp-1)){ 
       for(nK=1;nK<=nCantCabeceras;nK++){ 
        arrCeldas[nK]['arrLastSavedColspan'][nI] = nTemp; 
       } 
       arrEncabezados[nI] = jTemp.text(); 
       break; 
       nJ = 999999; //salimos del FOR. 
      } 
     } 
     //console.warn('nI: '+nI+' nJ: '+nJ+' post: x:'+x+' nTemp:'+ nTemp+' text:'+jTemp.text()+' arrLastColspan [0]:'+arrCeldas[nI]['arrLastColspan'][0]+' [1]:'+arrCeldas[nI]['arrLastColspan'][1]+' [2]:'+arrCeldas[nI]['arrLastColspan'][2]+'[3]:'+arrCeldas[nI]['arrLastColspan'][3]+' arrLastSavedColspan [0]:'+arrCeldas[nI]['arrLastSavedColspan'][0]+' [1]:'+arrCeldas[nI]['arrLastSavedColspan'][1]+' [2]:'+arrCeldas[nI]['arrLastSavedColspan'][2]+'[3]:'+arrCeldas[nI]['arrLastSavedColspan'][3]); 
    } 
} 
console.warn(arrEncabezados[1]+' '+arrEncabezados[2]+' '+arrEncabezados[3]+' bTemp: '+bTemp+' nCantCabeceras: '+nCantCabeceras+' Fecha:'+sFecha+' ¿se ve fecha?:'+(isScrolledVerticalIntoView(jTdFecha.get(0))&&isScrolledHorizontalIntoView(jTdFecha.get(0)))+' ¿se ve encabezado?:'+(isScrolledVerticalIntoView(jTdEncabezadoFecha.next().get(0))&&isScrolledHorizontalIntoView(jTdEncabezadoFecha.next().get(0)))); 

tr = ''; 
y = ''; 
x = ''; 
jTdFecha = ''; 
sFecha = ''; 
arrCeldas = ''; 
arrEncabezados = ''; 
arrJFila = ''; 
nTemp = ''; 
jTdEncabezadoFecha = ''; 
nCantCabeceras = ''; 
jTemp = ''; 
nI = ''; 
nJ = ''; 
nK = ''; 
nL = ''; 
bTemp = ''; 

})

Je pense toujours comment avoir des lignes détectées avec rowpans