正確地突出顯示一個表儘管rowspan和colspan屬性 - 沒有jQuery

Question

感謝在另一個部門編寫了一些廢話代碼的一些！＃$＃@，我無法使用jQuery庫 - 儘管我非常希望這樣做。他們的軟件已經發布到世界，我必須兼容。

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

我想突出一張表。期望的行爲：

1. 單擊正文中的單元格突出顯示該行。
2. 點擊頭部的單元格突出顯示該列。
3. 如果列和行都突出顯示，則交叉點將突出顯示不同的顏色（超級突出顯示）。
4. 點擊先前超級高亮的單元格會關閉高光。

這種行爲是很簡單的一個基本表做，但是當rowspans和colspans開始飼養它們醜陋的頭，事情開始變得有點靠不住......彰顯細胞[5]，例如，不再可靠工作。我想，爲了加快突出顯示本身的執行時間（通過更改類名稱），是預先計算所有單元格的'偏移量' - 使用'colStart'和'colEnd'，'rowStart '和'rowEnd'，當頁面加載並以某種方式將其存儲在數組中時。

問題：你會如何實現這個功能？我的JavaScript非常生疏，我的編程技巧非常簡陋，並且會從一些指導中受益匪淺。

謝謝，

斯科特。

Answer 1

如果不能使用jQuery的原因是技術性的（例如某人使用$來實現傻事），那麼您可以嘗試使用jQuery的noConflict模式。只是想讓你知道=）

您的預先計算系統似乎會對我有用，否則。

Answer 2

我做了一個腳本，檢測表中的行頭和子頭與colspans，但沒有rowspans：

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 = ''; 

}）

我還在思考如何與檢測行rowspans