Effetto evidenziazione riga di una tabella

**miglios** · 29-10-2006, 16:19

Ho la necessita' di implementare tale funzionalità in una tabella, piu' precisamente, vorrei
che al passaggio del mouse sulle righe di una tabella, esse si illuminassero con un effetto
stile pannello di controllo MySQL.

Grazie a chiunque risponda

**whisher** · 29-10-2006, 20:44

Ciao.

Codice PHP:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style type="text/css">

tr.over { background-color:#FFCC99}

tr.out { background-color:#66FF66}

</style>

<script language="JavaScript" type="text/JavaScript">

function init()

{

        var nav=document.getElementById('target');



        if(nav && nav.getElementsByTagName('tr')[0])

        {

            var tr = nav.getElementsByTagName('tr');

            for(var i=0;i<tr.length;i++)

            {

                    addEvent(tr[i],'mouseout',trOut,false);

                    addEvent(tr[i],'mouseover',trOver,false);

                    

                    

            }

        }

        

};

function cssjs(a,o,c1,c2)

{

    switch (a)

    {

        case 'swap':

        o.className=!cssjs('check',o,c1)?o.className.replace(c2,c1):o.className.replace(c1,c2);

        break;

        case 'add':

        if(!cssjs('check',o,c1)){o.className+=o.className?' '+c1:c1;}

        break;

        case 'remove':

        var rep=o.className.match(' '+c1)?' '+c1:c1;

        o.className=o.className.replace(rep,'');

        break;

        case 'check':

        return new RegExp('\\b'+c1+'\\b').test(o.className)

        break;

    }

};

function addEvent(elm, evType, fn, useCapture){

        if (elm.addEventListener) 

        {

            elm.addEventListener(evType, fn, useCapture);

            return true;

        } else if (elm.attachEvent) {

            var r = elm.attachEvent('on' + evType, fn);

            return r;

        } else {

            elm['on' + evType] = fn;

        }

    }

function getTarget(e){

        var target = window.event ? window.event.srcElement : e ? e.target : null;

        if (!target){return false;}

        return target;

    }

function trOver(e)

{

    var trTarget = getTarget(e);

    cssjs('swap',trTarget.parentNode,'out','over');

}

function trOut(e)

{

    var trTarget = getTarget(e);

    if(cssjs('check',trTarget.parentNode,'over'))

    {

        cssjs('swap',trTarget.parentNode,'out','over');



    }

    else

    {

        cssjs('swap',trTarget.parentNode,'out','over');

    }

}

addEvent(window,'load',init, false);

</script>



</head>

<body>

<table  id="target" width="100%"  border="0" cellspacing="0" cellpadding="0">

  <tr class="out">

    <td>PIPPO</td>

    <td>CAIO</td>

    <td>SEMP</td>

  </tr>

  <tr class="out">

    <td>PIPPO</td>

    <td>CAIO</td>

    <td>SEMP</td>

  </tr>

  <tr class="out">

    <td>PIPPO</td>

    <td>CAIO</td>

    <td>SEMP</td>

  </tr>

  <tr class="out">

    <td>PIPPO</td>

    <td>CAIO</td>

    <td>SEMP</td>

  </tr>

  <tr class="out">

   <td>PIPPO</td>

    <td>CAIO</td>

    <td>SEMP</td>

  </tr>

</table>



</body>

</html>

Su funzioni di icant

**miglios** · 29-10-2006, 21:16

non funziona, forse perche' la tabella la genero dinamicamente col php?

dai un'occhiata:

Codice PHP:


$query_results = mysql_query($query);

$i = 0;



while($fetch = mysql_fetch_array($query_results))

     {

     $i++;

     

     echo '<tr class="out">';

     echo '<td bgcolor="#FFF1ff" width="070"><font face="Verdana" size="2">[url="descrizione.php?var='.$fetch['id'].'"]'.$i.' - '.$fetch['id'].'[/url]';

     echo '<td bgcolor="#FFF1ff" width="060"><font face="Verdana" size="2">[url="descrizione.php?var='.$fetch['id'].'"]'.$fetch['vendita_locazione'].'[/url]';

     echo '<td bgcolor="#FFF1ff" width="170"><font face="Verdana" size="2">[url="descrizione.php?var='.$fetch['id'].'"]'.$fetch['tipo_immobile'].'[/url]';

     echo '<td bgcolor="#FFF1ff" width="100"><font face="Verdana" size="2">[url="descrizione.php?var='.$fetch['id'].'"]'.$fetch['prezzo'].'[/url]';

     echo '<td bgcolor="#FFF1ff" width="200"><font face="Verdana" size="2">[url="descrizione.php?var='.$fetch['id'].'"]'.$fetch['comune'].'[/url]';

     echo "</tr>";



   ...

**whisher** · 29-10-2006, 21:40

A parte che non si capisce perchè
stampi tutti quei titoli quando la variabile
che passi via get è sempre la stessa
(quindi o stampi vendita_locazione o tipo_immobile)
Poi devi mettere un id alla tabella:

e utilizzare i css per il layout
devi toglere quei obrobriosi :

bgcolor="#FFF1ff" width="070

"><font face="Verdana" size="2">

e mettere il tag dii chiusura td,

**miglios** · 29-10-2006, 21:44

Scusa ma non ho capito..
Ti chiedo troppo se mi fai un'altro esempio?

con i css non so da che parte cominciare....

Grazie in anticipo per ora

**whisher** · 29-10-2006, 22:09

Te l'ho postato l'esempio

guida css
Con i links dentro alle td il tag che scatena
l'evento cambia quindi get target cambia
in questo modo:

Codice PHP:


function getTarget(e){

        var target = window.event ? window.event.srcElement : e ? e.target : null;

        if (!target){return false;}

        if (target.tagName.toLowerCase() == 'a'){target = target.parentNode;}

        return target;

    }

**miglios** · 29-10-2006, 22:12

grazie

Discussione: Effetto evidenziazione riga di una tabella

Strumenti discussione

Ricerca discussione

Visualizza

Effetto evidenziazione riga di una tabella

.................

...............

.............

Permessi di invio