evidenziare colonne tabella

[mansportivo]

ci sono mille funzioni che evidenziano al passaggio del mouse la riga interessata, mentre non ne ho trovati che evidenziano la colonna interessata

a dire il vero ho trovato una funzione che evidenzia le colonne al passaggio del mouse ma è una estensione di jquery, io invece cercavo qualcosa di indipendente

sapete se e dove posso trovarla?

ciao a tutti e buon lavoro

[artorius]

mmm la colonna... in effetti è un po' incasinato

Allora, la questione è che per ottenere gli elementi da evidenziare devi ottenere l'indice della cella su cui sei e poi ricercare TUTTE le righe della tabella e per ogni riga evidenziare la cella con indice = a quello trovato.

Allora ti scrivo una funzione che prende in ingresso una cella e ritorna un array contenente le celle della colonna corrispondente. Tieni presente che se ci sono celle in colspan questo manderà l'effetto a ${espressione poco carina}

function getColumn(cell)
{
   var tmp = cell.parentNode;
   var allCells = tmp.getElementsByTagName('td');
   var index = 0;   
   for(i = 0; i < allCells.length; i++)
   {
      if(allCells[i] == cell){index = i; break;}
   }
   while(tmp.tagName.toLowerCase() != 'table')
   {tmp = tmp.parentNode;};
   var allRows = tmp.getElementsByTagName('tr');
   var ret = new Array();
   var counter = 0;
   for(i = 0; i < allRows.length; i++)
   {
      allCells = allRows[i].getElementsByTagName('td');
      ret[counter++] = allCells[index];
   }
   return ret;
} 

A questo punto devi solo applicarlo all'evento onMouseOver e onMouseOut delle celle della tabella con una istruzione per modificare il BG e sei a posto.

Ad esempio

window.onload = function(){
    var tds = document.getElementsByTagName('td');
    for(i = 0; i < tds.length; i++)
    {
        tds[i].onmouseover = function(){
            var col = getColumn(this);
            for(j = 0; j < col.length; j++)
            {
                col[j].style.backgroundColor = '#fffd98';
            }
        }
        tds[i].onmouseout = function(){
            var col = getColumn(this);
            for(j = 0; j < col.length; j++)
            {
                col[j].style.backgroundColor = '#fff';
            }
        }
    }
} 

N.B. io ho gestito solo le celle TD, non le TH, ma per quello dovrebbe bastarti modificare leggermente lo script.

[mansportivo]

Originariamente inviato da artorius
mmm la colonna... in effetti è un po' incasinato

Allora, la questione è che per ottenere gli elementi da evidenziare devi ottenere l'indice della cella su cui sei e poi ricercare TUTTE le righe della tabella e per ogni riga evidenziare la cella con indice = a quello trovato.

Allora ti scrivo una funzione che prende in ingresso una cella e ritorna un array contenente le celle della colonna corrispondente. Tieni presente che se ci sono celle in colspan questo manderà l'effetto a ${espressione poco carina}

function getColumn(cell)
{
   var tmp = cell.parentNode;
   var allCells = tmp.getElementsByTagName('td');
   var index = 0;   
   for(i = 0; i < allCells.length; i++)
   {
      if(allCells[i] == cell){index = i; break;}
   }
   while(tmp.tagName.toLowerCase() != 'table')
   {tmp = tmp.parentNode;};
   var allRows = tmp.getElementsByTagName('tr');
   var ret = new Array();
   var counter = 0;
   for(i = 0; i < allRows.length; i++)
   {
      allCells = allRows[i].getElementsByTagName('td');
      ret[counter++] = allCells[index];
   }
   return ret;
} 

A questo punto devi solo applicarlo all'evento onMouseOver e onMouseOut delle celle della tabella con una istruzione per modificare il BG e sei a posto.

Ad esempio

window.onload = function(){
    var tds = document.getElementsByTagName('td');
    for(i = 0; i < tds.length; i++)
    {
        tds[i].onmouseover = function(){
            var col = getColumn(this);
            for(j = 0; j < col.length; j++)
            {
                col[j].style.backgroundColor = '#fffd98';
            }
        }
        tds[i].onmouseout = function(){
            var col = getColumn(this);
            for(j = 0; j < col.length; j++)
            {
                col[j].style.backgroundColor = '#fff';
            }
        }
    }
} 

N.B. io ho gestito solo le celle TD, non le TH, ma per quello dovrebbe bastarti modificare leggermente lo script.

grazie per la risposta, faccio qualche prova e ti faccio sapere

grazie per ora

[mansportivo]

Originariamente inviato da mansportivo
grazie per la risposta, faccio qualche prova e ti faccio sapere

grazie per ora

funziona veramente bene, l'unica cosa è che non riesco a recuperare il colore di sfondo delle cella prima di cambiarlo, in modo da ricolorarle all'uscita

ho prova to ad interrogare il colore così:
alert(col[j].style.backgroundColor);

ma mi restituisce un undefined

come mai?

[artorius]

perché se non la stili espressamente (cioè se la lasci con il colore di default) non ha valore. Di default lo puoi mettere bianco (#FFF) o trasparente ("transparent")

[mansportivo]

Originariamente inviato da artorius
perché se non la stili espressamente (cioè se la lasci con il colore di default) non ha valore. Di default lo puoi mettere bianco (#FFF) o trasparente ("transparent")

grazie dell'interessamento

le celle hanno già un colore che prendendo da un css, quindi hanno già un background anche se non dichiarato tramite js

se fosse possibile intercettare quello avrei risolto il mio problema

[artorius]

beh, perché style ottiene solo le proprietà settate con l'attributo style="" nel HTML, è anche per questo che uso una libreria per la manipolazione del DOM (tipo Mootools) in modo da evitare di implementare il sistema per ottenere le proprietà definite nei CSS

[mansportivo]

Originariamente inviato da artorius
beh, perché style ottiene solo le proprietà settate con l'attributo style="" nel HTML, è anche per questo che uso una libreria per la manipolazione del DOM (tipo Mootools) in modo da evitare di implementare il sistema per ottenere le proprietà definite nei CSS

ma ci sarà pure un modo per capire che colore di sfondo ha una cella....

oppure sto fantasticando....

[mansportivo]

Originariamente inviato da artorius
beh, perché style ottiene solo le proprietà settate con l'attributo style="" nel HTML, è anche per questo che uso una libreria per la manipolazione del DOM (tipo Mootools) in modo da evitare di implementare il sistema per ottenere le proprietà definite nei CSS

per questo caso specifico ho risolto in modo "spartano" modificando il codice così:

window.onload = function(){
var tds = document.getElementsByTagName('td');

for(i = 0; i < tds.length; i++)
{
tds[i].onmouseover = function(){
var col = getColumn(this);
for(j = 0; j < col.length; j++)
{
//alert (col);
col[j].style.backgroundColor = '#fffd98';
}
}
tds[i].onmouseout = function(){
var col = getColumn(this);
for(j = 0; j < col.length; j++)
{
//old col[j].style.backgroundColor = '#fff';
col[j].style.backgroundColor = '';
}
}
}
}

cioè impostando il background color come stringo vuota

ciao

[artorius]

puoi anche semplicemente rimuovere l'attributo style dall'elemento:

col[j].removeAttribute(style);