cambiare dinamicamente colore di sfondo su una tabella

[sharky86]

ciao a tutti!

ho una tabella molto larga, e quando vado verso destra perdo la colonna che contiene il valore di riferimento. (id)

cio che vorrei fare é che una volta che ho scelto una riga della tabella clicco su una cella qualsiasi di quella riga, e lo sfondo della intera riga viene colorato. non appena ne selziono un altra, quella riga torna bianca.

si puo fare?

grazie

ciao

igor

[artorius]

metti di avere la tabella con id = "MyTable", metti questo script:

var rows;
var colorClick = '#ffff66', colorUnclick = '#FFF';
window.onload = function(){
	var tab = document.getElementById('MyTable');
	rows = tab.getElementsByTagName('tr');
	for(i = 0; i < rows.length; i++)
	{
		rows[i].onclick = function(){
			for(j = 0; j < rows.length; j++)
			{
				rows[j].style.backgroundColor = rows[j] == this ? colorClick : colorUnclick;
			}
		}
	}				
}

Dovrebbe andare.

Per customizzarlo: colorClick è il colore che la riga cliccata prende, colorUnclick sono tutte le altre righe, modifichi la stringa "MyTable" in var tab = document.getElementById('MyTable'); con l'id della tua tabella per applicare l'effetto.

[sharky86]

mmmmmmmmmititccccccoooooooooo

funziona perfettamente! grazie mille!

non mi é molto chiaro il funzionamento dello script, (cioé in termini di programmazione) ma finche funziona va bene.. grazi emille!

ciao

igor

[artorius]

scusa, se non ti è chiaro qualcosa chiedi...

[sharky86]

ciao!

ritorno a questo topic dopo tanto tempo.

é possibile fare la stessa cosa per le colonne invece delle righe?

ho provato a sostituire tr con td ma non funziona.

grazie

ciao

igor

[artorius]

guarda è un cosa un pelo diversa (e se conosci un minimo le HTML table ti rendi conto del perché), tra l'altro mi viene un hictus al vedere la m###a di codice che ho scritto...

dunque fasom le cose per bene:

 var SelectRow = function(){
    var tr = this.parentNode;
    var tbody = tr.parentNode;
    for(var tmptr = tbody.firstChild; tmptr != null; tmptr = tmptr.nextSibling){
        if(tmptr.nodeType == 1){
            if(tmptr.tagName.toUpperCase() == "TR"){
                var colorToApply = unselectColor;
                if(tmptr == tr) colorToApply = selectColor;
                for(var tmptd = tmptr.firstChild; tmptd != null; tmptd = tmptd.nextSibling){
                    if(tmptd.nodeType == 1 && tmptd.tagName.toUpperCase() == "TD")
                        tmptd.style.backgroundColor = colorToApply;
                }
            }
        }
    }
}

var SelectColumn = function(){
    var tr = this.parentNode;
    var indexTD = 0;
    var allCell = tr.getElementsByTagName("td");
    for(var i = 0; i < allCell.length; i++){
        if(allCell[i] == this) indexTD = i;
    }
    
    var tbody = tr.parentNode;
    for(var tmptr = tbody.firstChild; tmptr != null; tmptr = tmptr.nextSibling){
        if(tmptr.nodeType == 1){
            if(tmptr.tagName.toUpperCase() == "TR"){
                var index = 0;
                for(var tmptd = tmptr.firstChild; tmptd != null; tmptd = tmptd.nextSibling){
                    if(tmptd.nodeType == 1 && tmptd.tagName.toUpperCase() == "TD"){
                        var colorToApply = unselectColor;
                        if(indexTD == index++) colorToApply = selectColor;                
                        tmptd.style.backgroundColor = colorToApply;
                    }
                }
            }
        }
    }
}



var FunctionToApply = SelectColumn; //Qui ci metti la funzione che vuoi usare se selezionare la riga o la colonna
var tableID = "IDTabella";
var selectColor = "#cecece", unselectColor = "#FFF";


var Init = function(){
    var theTable = document.getElementById(tableID);
    if(!theTable) throw "Something does not work: are you sure of the Table ID?";

    var tmp = theTable.getElementsByTagName("tbody")[0] || theTable;

    var cells = tmp.getElementsByTagName("td");

    for(var i = 0; i < cells.length; i++){
        cells[i].onclick = FunctionToApply;
    }
}

window.onload = Init; 

Su Firefox funzica, manon ho avuto il tempo di provarlo anche su IE (su Safari3, Opera9 e Google Chrome va). Fai attenzione a definire le funzioni PRIMA di FunctionToApply, sennò te lo ritrovi vuoto.

[sharky86]

ciao!

grazie mille funziona!

sia su ff che su IE.

pero ho un piccolo problema. la tabella ha le celle colorate di vari colori in base al contenuto, e quando clicco una colonna tutte le altre colonne diventano bianche.. la versione precedente invece non lo faceva. si puo far in modo che mantengano il proprio colore?

grazie

ciao

igor

-----------EDIT----------------------

si puo invece che cambiare il colore aggiungere al contenuto della cella una X? cioé contenuto cella = cella X

[sharky86]

ho risolto mettendo il bordo della tabella a 0px invece che cambiare il colore.. grazie!

ciao

igor