OnMouseOut 'pilotato'

[scorpioprise]

Buongiorno a tutti, inizio la mia presenza su questo forum con una domanda su questo potente event handler.

Il progetto è in una intranet, quindi non ho pagine da mostrare al pubblico...

Ho una tabella di 5 colonne, di cui un estratto con relativo js

<table width=100% border=1><tr><td width=20%><input  type=text value='D6' id='n775439103' class='D6'  onmouseover='evidenzia_riga(this.className);'  onmouseout='de_evidenzia_riga(this.className);'  /></td><td width=20%><input type=text value='91S201045' id='v775439103' class='D6'  onmouseover='evidenzia_riga(this.className);evidenzia_codice(this.value);'  onmouseout='de_evidenzia_riga(this.className);de_evidenzia_codice(this.value);'  attr_onmouout='1' onclick='skippa_onmouseover(this.value)'  /></td><td width=20%>&nbsp;</td><td width=20%><input type=text value='D6' id='n' class='D6'  onmouseover='evidenzia_riga(this.className);'  onmouseout='de_evidenzia_riga(this.className);'  /></td><td width=20%><input type=text value='91S201045' id='v' class='D6'  onmouseover='evidenzia_riga(this.className);evidenzia_codice(this.value);'  onmouseout='de_evidenzia_riga(this.className);de_evidenzia_codice(this.value);' attr_onmouout='1' onclick='skippa_onmouseover(this.value)'  /></td></tr>
<tr><td width=20%><input  type=text value='D5' id='n907238574' class='D5'  onmouseover='evidenzia_riga(this.className);'  onmouseout='de_evidenzia_riga(this.className);'  /></td><td width=20%><input type=text value='92S003042' id='v907238574' class='D5'  onmouseover='evidenzia_riga(this.className);evidenzia_codice(this.value);'  onmouseout='de_evidenzia_riga(this.className);de_evidenzia_codice(this.value);'  attr_onmouout='1' onclick='skippa_onmouseover(this.value)'  /></td><td width=20%>&nbsp;</td><td width=20%><input type=text value='D5' id='n' class='D5'  onmouseover='evidenzia_riga(this.className);'  onmouseout='de_evidenzia_riga(this.className);'  /></td><td width=20%><input type=text value='92S003042' id='v' class='D5'  onmouseover='evidenzia_riga(this.className);evidenzia_codice(this.value);'  onmouseout='de_evidenzia_riga(this.className);de_evidenzia_codice(this.value);' attr_onmouout='1' onclick='skippa_onmouseover(this.value)'  /></td></tr>
<tr><td width=20%><input  type=text value='D4' id='n1102800472' class='D4'  onmouseover='evidenzia_riga(this.className);'  onmouseout='de_evidenzia_riga(this.className);'  /></td><td width=20%><input type=text value='91S200997' id='v1102800472' class='D4'  onmouseover='evidenzia_riga(this.className);evidenzia_codice(this.value);'  onmouseout='de_evidenzia_riga(this.className);de_evidenzia_codice(this.value);'  attr_onmouout='1' onclick='skippa_onmouseover(this.value)'  /></td><td width=20%>&nbsp;</td><td width=20%><input type=text value='D4' id='n' class='D4'  onmouseover='evidenzia_riga(this.className);'  onmouseout='de_evidenzia_riga(this.className);'  /></td><td width=20%><input type=text value='91S200997' id='v' class='D4'  onmouseover='evidenzia_riga(this.className);evidenzia_codice(this.value);'  onmouseout='de_evidenzia_riga(this.className);de_evidenzia_codice(this.value);' attr_onmouout='1' onclick='skippa_onmouseover(this.value)'  /></td></tr>
<tr><td width=20%><input  type=text value='DL1' id='n144248951' class='DL1'  onmouseover='evidenzia_riga(this.className);'  onmouseout='de_evidenzia_riga(this.className);'  /></td><td width=20%><input type=text value='55S300101' id='v144248951' class='DL1'  onmouseover='evidenzia_riga(this.className);evidenzia_codice(this.value);'  onmouseout='de_evidenzia_riga(this.className);de_evidenzia_codice(this.value);'  attr_onmouout='1' onclick='skippa_onmouseover(this.value)'  /></td><td width=20%>&nbsp;</td><td width=20%><input type=text value='DL1' id='n' class='DL1'  onmouseover='evidenzia_riga(this.className);'  onmouseout='de_evidenzia_riga(this.className);'  /></td><td width=20%><input type=text value='55S300101' id='v' class='DL1'  onmouseover='evidenzia_riga(this.className);evidenzia_codice(this.value);'  onmouseout='de_evidenzia_riga(this.className);de_evidenzia_codice(this.value);' attr_onmouout='1' onclick='skippa_onmouseover(this.value)'  /></td></tr>
<tr><td width=20%><input  type=text value='D9' id='n1448719805' class='D9'  onmouseover='evidenzia_riga(this.className);'  onmouseout='de_evidenzia_riga(this.className);'  /></td><td width=20%><input type=text value='92S003042' id='v1448719805' class='D9'  onmouseover='evidenzia_riga(this.className);evidenzia_codice(this.value);'  onmouseout='de_evidenzia_riga(this.className);de_evidenzia_codice(this.value);'  attr_onmouout='1' onclick='skippa_onmouseover(this.value)'  /></td><td width=20%>&nbsp;</td><td width=20%><input type=text value='D9' id='n' class='D9'  onmouseover='evidenzia_riga(this.className);'  onmouseout='de_evidenzia_riga(this.className);'  /></td><td width=20%><input type=text value='92S003042' id='v' class='D9'  onmouseover='evidenzia_riga(this.className);evidenzia_codice(this.value);'  onmouseout='de_evidenzia_riga(this.className);de_evidenzia_codice(this.value);' attr_onmouout='1' onclick='skippa_onmouseover(this.value)'  /></td></tr>
<tr><td width=20%><input  type=text value='D3' id='n1084877551' class='D3'  onmouseover='evidenzia_riga(this.className);'  onmouseout='de_evidenzia_riga(this.className);'  /></td><td width=20%><input type=text value='92S003043' id='v1084877551' class='D3'  onmouseover='evidenzia_riga(this.className);evidenzia_codice(this.value);'  onmouseout='de_evidenzia_riga(this.className);de_evidenzia_codice(this.value);'  attr_onmouout='1' onclick='skippa_onmouseover(this.value)'  /></td><td width=20%>&nbsp;</td><td width=20%><input type=text value='D3' id='n' class='D3'  onmouseover='evidenzia_riga(this.className);'  onmouseout='de_evidenzia_riga(this.className);'  /></td><td width=20%><input type=text value='92S003043' id='v' class='D3'  onmouseover='evidenzia_riga(this.className);evidenzia_codice(this.value);'  onmouseout='de_evidenzia_riga(this.className);de_evidenzia_codice(this.value);' attr_onmouout='1' onclick='skippa_onmouseover(this.value)'  /></td></tr>
<tr><td width=20%><input  type=text value='D2' id='n993602406' class='D2'  onmouseover='evidenzia_riga(this.className);'  onmouseout='de_evidenzia_riga(this.className);'  /></td><td width=20%><input type=text value='92S003042' id='v993602406' class='D2'  onmouseover='evidenzia_riga(this.className);evidenzia_codice(this.value);'  onmouseout='de_evidenzia_riga(this.className);de_evidenzia_codice(this.value);'  attr_onmouout='1' onclick='skippa_onmouseover(this.value)'  /></td><td width=20%>&nbsp;</td><td width=20%><input type=text value='D2' id='n' class='D2'  onmouseover='evidenzia_riga(this.className);'  onmouseout='de_evidenzia_riga(this.className);'  /></td><td width=20%><input type=text value='92S003042' id='v' class='D2'  onmouseover='evidenzia_riga(this.className);evidenzia_codice(this.value);'  onmouseout='de_evidenzia_riga(this.className);de_evidenzia_codice(this.value);' attr_onmouout='1' onclick='skippa_onmouseover(this.value)'  /></td></tr></table>

function evidenzia_riga(reference) {
    var elements = document.getElementsByClassName(reference);
    for ( var i = 0; i < elements.length; i++) {
        elements[i].style.backgroundColor = "#cfc0c0";
    }
}
function de_evidenzia_riga(reference) {
    var elements = document.getElementsByClassName(reference);
    for ( var i = 0; i < elements.length; i++) {
        elements[i].style.backgroundColor = "#ffffff";
    }
}
function evidenzia_codice(codigo) {
    var elements = getElementsByAttribute("value", codigo);
    for ( var i = 0; i < elements.length; i++) {
        elements[i].style.backgroundColor = "#cfc0c0";
    }
}
function de_evidenzia_codice(codigo) {
    var elements = getElementsByAttribute("value", codigo);
    for ( var i = 0; i < elements.length; i++) {
        if (elements[i].getAttribute('attr_onmouout') === '0') {
            elements[i].setAttribute('attr_onmouout', '1'); 
            // questo dovrebbe saltare il mouseout ma lo ripristina
        } else {
            elements[i].style.backgroundColor = "#ffffff";
        }
    }
}
function skippa_onmouseover(codigo) {
    var elements = getElementsByAttribute("value", codigo);
    for ( var i = 0; i < elements.length; i++) {
        elements[i].setAttribute('attr_onmouout', '0'); // esclude il mouseout
    }

}

Con questo js attualmente evidenzio solo le celle appartenenti alla stessa riga, oppure, se vado sulla seconda e quinta cella, quei campi che contengono lo stesso numero.
Ora, il click funziona, ossia quando clicco su una cella della seconda e quinta colonna mi rimangono attive tutte le celle con lo stesso numero MENO quella da cui sto uscendo, nel senso che rimane evidenziata ma appena esco torna normale. Eppure il suo attributo dovrebbe essere settato come gli altri, no? Pertanto dovrebbe, nell'IF della de_evidenziazione, saltare l'impostazione backgroundcolor per stare nel setAttribute...

Siccome non è l'ultima cosa da fare nelle funzioni js che ho richiamato (saranno ampliate di alcune funzionalità), volevo capire se sto sbagliando qualcosa sull'onmouseout.

[scorpioprise]

rinfresco la discussione, specificando di aver provato sotto Firefox questo comportamento. ora non ho modo di provarlo che sono senza il database sotto dei dati di partenza, magari con altri browser non lo fa. qualcuno ha voglia di provare?

[cavicchiandrea]

...
Ora, il click funziona, ossia quando clicco su una cella della seconda e quinta colonna mi rimangono attive tutte le celle con lo stesso numero MENO quella da cui sto uscendo, nel senso che rimane evidenziata ma appena esco torna normale. Eppure il suo attributo dovrebbe essere settato come gli altri, no? Pertanto dovrebbe, nell'IF della de_evidenziazione, saltare l'impostazione backgroundcolor per stare nel setAttribute...

Sono due eventi diversi e a se stanti pertanto al click dovrai impostare l'attributo e annullare il mouseout (onmouseout=function(){null}) oppure associargli lo stesso colore del click

[scorpioprise]

il fatto é che volevo proprio evitare di andare a togliere la funzione dall'onmouseout, ma di farlo saltare sulla base di un parametro. cosa che non ha funzionato per il campo in questione. Ovviamente, quando vado sui campi con lo stesso valore, uscendo col mouse spariscono tutti, ma se ci clicco sopra sparisce solo quello cliccato..... se non funziona mi penserò qualcos'altro

[scorpioprise]

Risolto, era un errore mio: dato che sono due le funzioni che resettano il colore, era la prima che attivava il cambio, è bastato replicare il comportamento dalla seconda e funziona.