mostra/nascondi onmouseover

**Roberto.filia** · 13-03-2024, 13:10

Buongiorno, ho un problema con un codice, ho una query php che mi estrapola i dati in una tabella, quindi dentro la while ho la parte della tabella che riguarda i TR e TD, ho fatto in modo che al passaggio del mouse su un TR mi apre il TR sottostante che mi estrapola piu informazioni ma non riesco a far si che una volta levato il cursore dal TR me lo richiude

codice:

while($row = $result->fetch_array(MYSQLI_ASSOC)) {
<tr class="trepo" onmouseover="datireport('pratica_<?PHP echo $id; ?>');">                <td><?PHP echo $row['sede']; ?></td>
                <td><?PHP echo $row['cognome']; ?></td>
                <td><?PHP echo $row['nome']; ?></td>
                <td><?PHP echo $row['cf']; ?></td>
                <td><?PHP echo $row['numero']; ?></td>
                <td><?PHP echo $row['mail']; ?></td>
                <td><?PHP echo $pratica; ?></td>
                <td><?PHP echo $datam; ?></td>
                <td><?PHP echo $data; ?></td>
                <td>&nbsp;</td>
            </tr>
            <tr class="trepos" id="pratica_<?PHP echo $id; ?>" style="display:none;" onmouseover="datireport('pratica_<?PHP echo $id; ?>');" onmouseout="document.getElementById('pratica_<?PHP echo $id; ?>').style.display = 'none';">
                <td colspan="10">altre informazioni</td>
            </tr>
}
<script language="JavaScript" type="text/javascript">
function datireport(id) {
    if (id === id){
        document.getElementById(id).style.display = 'block';
    }else{
        document.getElementById(pratica_).style.display = 'none';
    }
}
</script>

è un pò grezzo come codice se avete altre soluzioni vi ringrazio

**KillerWorm** · 13-03-2024, 17:07

Originariamente inviata da Roberto.filia

al passaggio del mouse su un TR mi apre il TR sottostante che mi estrapola piu informazioni

Ciao, dal codice che hai postato vedo che il secondo TR possiede già il contenuto "altre informazioni". Non capisco cosa intendi per "estrapola più informazioni". Intendi solo che deve avvenire un effetto mostra/nascondi di un elemento già esistente, oppure che tali informazioni devono essere caricate dinamicamente (magari con una richiesta AJAX o simili)?

Trovo comunque che il codice sia alquanto macchinoso.

Ho provato, per per ciò che è stato possibile, e vedo che il secondo <tr> viene mostrato quando si passa sul primo, ma può essere nascosto solo se si esce dal secondo (una volta aperto) e, ovviamente, non si torna sul primo. Questo perche nel primo <tr> hai definito solo il gestore dell'evento onmouseover, mentre il onmouseout lo hai definito solo nel secondo <tr>

A te non accade così?

Ci sono comunque diverse crepe nel sistema che hai adottato.
Tu stai modificando la proprietà display di un elemento <tr>, che imposti come block o come none, ma un elemento TR ha di fatto un valore "table-row" come default per la proprietà display, per cui quel "block", che vai ad applicare al passaggio del puntatore, può generare una rottura del layout della tabella.

Il tuo sistema inoltre è macchinoso e ridondante perché stai stabilendo una relazione dei due <tr> attraverso l'id e stai sporcando il codice HTML con gli eventi inseriti direttamente nei tag.

Originariamente inviata da Roberto.filia

è un pò grezzo come codice se avete altre soluzioni vi ringrazio

A mio parere, se il contenuto è già presente nella pagina e devi solo nascondere/mostrare i relativi <tr>, puoi risolvere in maniera più semplice e pulita usando un po' di CSS.
Qui un esempio minimo di base:

codice HTML:

<!DOCTYPE HTML>
<html lang="it">
  <head>   
    <title>Esempio</title>
    <style>
      .tabella_anagrafica{
        border-spacing: 0;
        border-collapse: collapse;
      }
      .tabella_anagrafica td{
        padding:.4em 1em;
        border: 1px solid grey;
      }
      .tabella_anagrafica tr.dettagli {
        display: none;
      }
      .tabella_anagrafica tr:hover+tr.dettagli,
      .tabella_anagrafica tr.dettagli:hover {
        display: table-row;
      }
    </style>
  </head>
  <body>
    <table class="tabella_anagrafica">
      <tr class="trepo">
        <td>sede</td>
        <td>cognome</td>
        <td>nome</td>
        <td>cf</td>
        <td>numero</td>
        <td>mail</td>
        <td>pratica</td>
        <td>datam</td>
        <td>data</td>
        <td>&nbsp;</td>
      </tr>
      <tr class="trepos dettagli">
        <td colspan="10">altre informazioni</td>
      </tr>

      <tr class="trepo">
        <td>sede</td>
        <td>cognome</td>
        <td>nome</td>
        <td>cf</td>
        <td>numero</td>
        <td>mail</td>
        <td>pratica</td>
        <td>datam</td>
        <td>data</td>
        <td>&nbsp;</td>
      </tr>
      <tr class="trepos dettagli">
        <td colspan="10">altre informazioni</td>
      </tr>

      <tr class="trepo">
        <td>sede</td>
        <td>cognome</td>
        <td>nome</td>
        <td>cf</td>
        <td>numero</td>
        <td>mail</td>
        <td>pratica</td>
        <td>datam</td>
        <td>data</td>
        <td>&nbsp;</td>
      </tr>
      <tr class="trepos dettagli">
        <td colspan="10">altre informazioni</td>
      </tr>

      <tr class="trepo">
        <td>sede</td>
       <td>cognome</td>
       <td>nome</td>
       <td>cf</td>
       <td>numero</td>
       <td>mail</td>
       <td>pratica</td>
       <td>datam</td>
       <td>data</td>
       <td>&nbsp;</td>
     </tr>
     <tr class="trepos dettagli">
        <td colspan="10">altre informazioni</td>
      </tr>
    </table>
  </body>
</html>

**Roberto.filia** · 13-03-2024, 17:21

si perdonami ti posto come dovrebbe essere realmente il codice e ti spiego come lo vorrei

codice:

while($row = $result->fetch_array(MYSQLI_ASSOC)){
<tr class="trepo" onmouseover="datireport('pratica_<?PHP echo $id; ?>');">
    <td><?PHP echo $row['sede'];?></td>
    <td><?PHP echo $row['cognome'];?></td>
    <td><?PHP echo $row['nome'];?></td>
    <td><?PHP echo $row['cf'];?></td>
    <td><?PHP echo $row['pratica']; ?></td>
</tr>

<tr class="trepos" id="pratica_<?PHP echo $id; ?>" style="display:none;" onmouseover="datireport('pratica_<?PHP echo $id; ?>');" onmouseout="document.getElementById('pratica_<?PHP echo $id; ?>').style.display = 'none';">
  <td><?PHP echo $row['numero'];?></td>
  <td><?PHP echo $row['mail'];?></td>
  <td><?PHP echo $datam;?></td>
  <td><?PHP echo $data;?></td>
</tr>
}

codice:

<script language="JavaScript" type="text/javascript">function datireport(id) {
    if (id === id){
        document.getElementById(id).style.display = 'block';
    }else{
        document.getElementById(pratica_).style.display = 'none';
    }
}
</script>

in poche parole il secondo TR dentro la WHILE è nascosto e vorrei che si visualizza al passaggio del mouse sopra al primo TR il problema che mi rimane aperto se passo al successivo WHILE, non so se ora mi sono spiegato bene

**KillerWorm** · 13-03-2024, 17:24

vedi soluzione CSS che ho postato

**Roberto.filia** · 13-03-2024, 17:35

si cosi lo volevo, grazie mille

**Roberto.filia** · 13-03-2024, 17:46

ho cercato di implementarlo al mio codice ma non capisco cosa sbaglio

codice:

.container .tabler .trepos{
	display: none;
	color: white;
}
.container .tabler tr:hover+dettagli,
.container .tabler tr.dettagli:hover
{
	display: table-row;
	background-color:aliceblue;
	color: black;
}

codice:

<tr class="trepo">				<td><?PHP echo $row['sede']; ?></td>
				<td><?PHP echo $row['cognome']; ?></td>
				<td><?PHP echo $row['nome']; ?></td>
				<td><?PHP echo $row['cf']; ?></td>
				<td><?PHP echo $row['numero']; ?></td>
				<td><?PHP echo $row['mail']; ?></td>
				<td><?PHP echo $pratica; ?></td>
				<td><?PHP echo $datam; ?></td>
				<td><?PHP echo $data; ?></td>
				<td>&nbsp;</td>
			</tr>
			<tr class="trepos dettagli">
				<td colspan="10">Test</td>
			</tr>

**KillerWorm** · 13-03-2024, 18:07

Un po' di cose sbagliate. Cerca di prestare maggiore attenzione a come ho impostato il mio esempio.

Nel CSS devi applicare display:none solo ai tr con classe dettagli; invece tu l'hai applicata a .trepos
Per specificare una classe nel CSS è necessario anteporre un punto al nome della classe; vedo invece che hai scritto tr:hover+dettagli che chiaramente è sbagliato perché dettagli è una classe e va quindi indicata col punto

Verifica queste cose e prova a correggere.

**Roberto.filia** · 13-03-2024, 20:37

corretto gli errori, adesso funziona grazie mille

Discussione: mostra/nascondi onmouseover

Strumenti discussione

Ricerca discussione

Visualizza

mostra/nascondi onmouseover

Permessi di invio