selezione progressiva delle righe di una tabella

**giuseppeI** · 28-06-2012, 09:56

Dire che sono poco esperto di javascript è già un'esaltazione.
Pensavo tuttavia che il codice sottostante dovesse funzionare (avrebbe dovuto evidenziare progressivamente le righe di una tabella).
Ho provato con tutti i cicli: for, while, do, ma il risultato è sempre lo stesso ovvero evidenzia soltanto l'ultima riga.
Quale potrebbe essere la soluzione?

Codice HTML:

<!DOCTYPE html>

<html>
<head>
    <title>Page Title</title>
</head>

<body>
   
<table id="prova" width=560px heighy 200px border 2px;>
<tr><td>pippo</td><td>pluto</td></tr>
<tr><td>Cane</td>
<td>pecora</td></tr>
<tr></tr><td>Bue
<td>Asino</td></td></tr>
<tr></tr><td>Capra</td>
<td>Gatto</td></tr>
<tr><td>Volpe</td>
<td>Lepre</td></tr>
<tr><td>Tasso</td>
<td>lince</td></tr>
</table>
<script>
var Tabella = document.getElementById("prova").getElementsByTagName("td");
var i=1;
function alterna(i){Tabella[i-1].style.backgroundColor='red';Tabella[i].style.backgroundColor='red';if (i>1){Tabella[i-2].style.backgroundColor='white';Tabella[i-3].style.backgroundColor='white';}}
 setTimeout("while (i<12){alterna(i);i+=2;}",1000)
</script>
</body>
</html>

la tabella è puramente dimostrativa ed il tempo del Timeout deve essere passato tramite una variabile.
Sono nelle mani della vostra bontà
Giuseppe

**criric** · 28-06-2012, 11:00

Ciao,
nell'html ci sono diversi errori

per le righe alterne puoi fare cosi:

Codice HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <table width="520" id="prova">
            <tr><td>pippo</td><td>pluto</td></tr>
            <tr><td>Cane</td>
                <td>pecora</td></tr>
            <tr><td>Bue</td>
                <td>Asino</td></tr>
            <tr><td>Capra</td>
                <td>Gatto</td></tr>
            <tr><td>Volpe</td>
                <td>Lepre</td></tr>
            <tr><td>Tasso</td>
                <td>lince</td></tr>
        </table>
        <script type="text/javascript">
            tabella = document.getElementById("prova").getElementsByTagName("tr");            
            for(var i=0; i < tabella.length; i++) {
                if(i %2 == 1) {
                    tabella[i].style.backgroundColor='red'; 
                }else{
                    tabella[i].style.backgroundColor='white';
                }
            }            
        </script>
    </body>
</html>

**giuseppeI** · 28-06-2012, 16:41

Ti ringrazio, ma ciò che mi occorre è la selezione progressiva ed il tempo di permanenza della selezione deve essere determinato da una variabile.
Per essere chiaro dove vorrei andare a parare allego un file video che altro non è la registrazione del video mentre gira un programma realizzato con toolbook.

continua a darmi una mano, criric
grazie

**criric** · 28-06-2012, 17:18

Scusa, non avevo capito

prova cosi:

Codice HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <table width="520" id="prova">
            <tr><td>pippo</td><td>pluto</td></tr>
            <tr><td>Cane</td>
                <td>pecora</td></tr>
            <tr><td>Bue</td>
                <td>Asino</td></tr>
            <tr><td>Capra</td>
                <td>Gatto</td></tr>
            <tr><td>Volpe</td>
                <td>Lepre</td></tr>
            <tr><td>Tasso</td>
                <td>lince</td></tr>
        </table>
        <script type="text/javascript">
            var tabella = document.getElementById("prova").getElementsByTagName("tr");
            var x=0;
            var tempo = 2000;            
            function evidenzia() {
                if(x >= tabella.length) {
                    clearInterval(s);
                    return;
                }
                for(var i=0; i < tabella.length; i++) {
                    if(i == x) {
                        tabella[i].style.backgroundColor='red'; 
                    }else{
                        tabella[i].style.backgroundColor='';
                    }
                } 
                x++;
            }   
            s = setInterval("evidenzia()",tempo);
        </script>
    </body>
</html>

**giuseppeI** · 28-06-2012, 23:00

Proprio così!!
Non so come ringraziarti.
adesso proverò- proveremo (vero?) a sincronizzare un file audio.
A presto.
Giuseppe

**giuseppeI** · 30-06-2012, 11:04

se la variabile tempo di "setInterval" varia ad ogni ciclo prendendo valari da un array lo script non funziona più, dove è che sbaglio?

Codice HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <table width="520" id="prova">
            <tr><td>Evò èkho stennù</td><td>pluto</td></tr>
            <tr><td>mòtti ìkhe n'armastì i khiatèra ssu, i Maria.</td><td>tasso</td></tr>
            <tr><td>...</td>
                <td>Tasso</td></tr>
            <tr><td>Eh si, adreffì-su èrkato pànta ettòssu.</td><td>Volpe</td></tr>
            <tr>
                <td>Eh, èrkato ettòssu!</td><td>tasso</td></tr>
            <tr>
                <td>Si, ka polèma ...</td><td>Tasso</td></tr>
            <tr>
                <td>Ce ìkhe o portarùna ...</td><td>Tasso</td></tr>
            <tr>
                <td>Esù èvale ta rùkha</td><td>Tasso</td></tr>
            <tr>
                <td>...</td><td>Tasso</td></tr>
            <tr>
                <td>Si, èvala toss ...</td><td>Tasso</td></tr>
            <tr>
                <td>Tòa dìfatto ta rùkha de!</td><td>Tasso</td></tr>
            <tr>
                <td>Allora elèane: ...</td><td>tasso</td></tr>
            <tr><td>Allora ...</td><td>Tasso</td></tr>
            <tr>
                <td>Embènnane e kristianì, a torùsane.</td><td>Tasso</td></tr>
            <tr>
                <td>Artena e ta dìfu plèo,</td><td>Tasso</td></tr>
            <tr>
                <td>ma prima edìfa ...</td><td>Tasso</td></tr>
            <tr>
                <td>ole ... khiatere mmu</td><td>Tasso</td></tr>
            <tr>
                <td>a dìo khiatère, ka àddhi,</td><td>Tasso</td></tr>
            <tr>
                <td>motti èffie àddhi,</td><td>Tasso</td></tr>
            <tr>
                <td>eskampettisa ìu</td><td>Tasso</td></tr>
            <tr>
                <td>ma sandè a pedìa</td><td>Tasso</td></tr>
            <tr>
                <td>mòtti ermàstisa m'o kalò ole ce dio</td><td>Tasso</td></tr>
            <tr>
                <td>a t'àdifsa ola ce dio,</td><td>Tasso</td></tr>
            <tr>
                <td>ègguala, èvala ettòssu mia ..</td><td>Tasso</td></tr>
            <tr>
                <td>Ermastisa</td><td>Tasso</td></tr>
            <tr>
                <td>Ce puru t'adreffi su, lèo,</td><td>Tasso</td></tr>
            <tr>
                <td>... efìda</td><td>Tasso</td></tr>
            <tr>
                <td>Eh! èkho, èkho stennù tuo.</td><td>Tasso</td></tr>
            <tr>
                <td>Mìa forà panta ìu ìane, de!</td><td>Tasso</td></tr>
            <tr>
                <td>Òle e màne telùsane na ...</td><td>Tasso</td></tr>
            <tr>
                <td>na dùne o korrèdo os khiaterò.</td><td>Tasso</td></tr>
            <tr>
                <td>Pos kùi o korredo?</td><td>Tasso</td></tr>
            <tr>
                <td>Corrèdo?</td><td>Tasso</td></tr>
            <tr>
                <td>Ce pricìa ti ène pricìa?</td><td>Tasso</td></tr>
            <tr>
                <td>Ta pricìa, pricì ...</td><td>Tasso</td></tr>
         </table>
        <script type="text/javascript">
           
            var tabella = document.getElementById("prova").getElementsByTagName("tr");
            var x=0;
            var b=0;
            var tempo;            
            var tempi = new Array(0,1847,4111,5419,7135,8965,10148,11140,13000,13500,15485,16250);
             
            
            function evidenzia() {
                if(x >= tabella.length) {
                    clearInterval(s);
                    return;
                }
                for(var i=0; i < tabella.length; i++) {
                    tempo= tempi[(i+1)]-tempi[(i)]
                    if(i == x) {
                        tabella[i].style.backgroundColor='red'; 
                    }else{
                        tabella[i].style.backgroundColor='';
                    }
                } 
                x++;
            }
            s = setInterval("evidenzia()",tempo);
        </script>
    </body>
</html>

**alessandro1997** · 30-06-2012, 11:41

@giuseppeI: usa i tag BBCode per formattare il codice. Stavolta ho modificato io il post, il prossimo lo cancello.

**giuseppeI** · 30-06-2012, 18:25

Ciao Alessandro, come ho avuto modo di dire nella presentazione della discussione, non sono un esperto, ne un grande conoscitore dell' html e tanto meno dei tag BBCode, tanto è vero che non riesco a vedere la differenza tra il codice che ho inviato io e quello da lei modificato. Se almeno fossi in grado di notare la differenza mi darei da fare per rientrare nei nei regolamenti del forum (perché di questo si tratta, vero)?
Tuttavia il forum stesso si nutre con i post degli utenti che normalmente hanno dei problemi da risolvere e che quindi, come me, chi più chi meno, hanno necessità di apprendere o perfezionare le loro conoscenze.
Le sarei grato, quindi, se oltre la tiratina d'orecchie e la minaccia di non pubblicare il post, mi desse qualche delucidazione in più sui tag BBCode, ma le sarei immensamente più riconoscente se mi desse una mano nel risolvere il problema del post: ovvero perché, riferendomi al post precedente, quando la variabile "testo"
smette di essere una costante per divenire una variabile il codice non gira più?
La ringrazio
Giuseppe

**criric** · 08-07-2012, 11:28

Prova cosi:

Codice:

<script type="text/javascript">
           
            var tabella = document.getElementById("prova").getElementsByTagName("tr");
            var x=0;
            var b=0;        
            var tempi = new Array(0,1847,4111,5419,7135,8965,10148,11140,13000,13500,15485,16250);
             
            
            function evidenzia() {
                if(x >= tabella.length) {
                    clearInterval(s);
                    return;
                }
                for(var i=0; i < tabella.length; i++) {
                    
                    if(i == x) {
                        tabella[i].style.backgroundColor='red'; 
                    }else{
                        tabella[i].style.backgroundColor='';
                    }
                } 
                x++;
                s = setInterval("evidenzia()",tempi[x]);
            }
            
            evidenzia();
            
        </script>

dovrai inserire nell'array un tempo per ogni riga della tabella

I tag BBCode sono presenti sulla barra di formattazione che trovi sopra la textarea che usi per scrivere i post
servono per formattare il codice in modo da renderlo piu leggibile
Ti è sufficiente selezionare il codice che hai scritto e premere su una delle ultime icone della seconda riga, in base al codice che hai postato (CODE,HTML,PHP)

**giuseppeI** · 12-07-2012, 19:48

Codice HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <table width="520" id="prova">
            <tr><td>Evò èkho stennù</td><td>pluto</td></tr>
            <tr><td>mòtti ìkhe n'armastì i khiatèra ssu, i Maria.</td><td>tasso</td></tr>
            <tr><td>...</td>
                <td>Tasso</td></tr>
            <tr><td>Eh si, adreffì-su èrkato pànta ettòssu.</td><td>Volpe</td></tr>
            <tr>
                <td>Eh, èrkato ettòssu!</td><td>tasso</td></tr>
            <tr>
                <td>Si, ka polèma ...</td><td>Tasso</td></tr>
            <tr>
                <td>Ce ìkhe o portarùna ...</td><td>Tasso</td></tr>
            <tr>
                <td>Esù èvale ta rùkha</td><td>Tasso</td></tr>
            <tr>
                <td>...</td><td>Tasso</td></tr>
            <tr>
                <td>Si, èvala toss ...</td><td>Tasso</td></tr>
            <tr>
                <td>Tòa dìfatto ta rùkha de!</td><td>Tasso</td></tr>
            <tr>
                <td>Allora elèane: ...</td><td>tasso</td></tr>
            <tr><td>Allora ...</td><td>Tasso</td></tr>
            <tr>
                <td>Embènnane e kristianì, a torùsane.</td><td>Tasso</td></tr>
            <tr>
                <td>Artena e ta dìfu plèo,</td><td>Tasso</td></tr>
            <tr>
                <td>ma prima edìfa ...</td><td>Tasso</td></tr>
            <tr>
                <td>ole ... khiatere mmu</td><td>Tasso</td></tr>
            <tr>
                <td>a dìo khiatère, ka àddhi,</td><td>Tasso</td></tr>
            <tr>
                <td>motti èffie àddhi,</td><td>Tasso</td></tr>
            <tr>
                <td>eskampettisa ìu</td><td>Tasso</td></tr>
            <tr>
                <td>ma sandè a pedìa</td><td>Tasso</td></tr>
            <tr>
                <td>khiatere</td><td>Tasso</td></tr>            
            <tr>
                <td>mòtti ermàstisa m'o kalò ole ce dio</td><td>Tasso</td></tr>
            <tr>
                <td>a t'àdifsa ola ce dio,</td><td>Tasso</td></tr>
            <tr>
                <td>ègguala, èvala ettòssu mia ..</td><td>Tasso</td></tr>
            <tr>
                <td>Ermastisa</td><td>Tasso</td></tr>
            <tr>
                <td>Ce puru t'adreffi su, lèo,</td><td>Tasso</td></tr>
            <tr>
                <td>... efìda</td><td>Tasso</td></tr>
            <tr>
                <td>Eh! èkho, èkho stennù tuo.</td><td>Tasso</td></tr>
            <tr>
                <td>Mìa forà panta ìu ìane, de!</td><td>Tasso</td></tr>
            <tr>
                <td>Òle e màne telùsane na ...</td><td>Tasso</td></tr>
            <tr>
                <td>na dùne o korrèdo os khiaterò.</td><td>Tasso</td></tr>
            <tr>
                <td>Pos kùi o korredo?</td><td>Tasso</td></tr>
            <tr>
                <td>korredo!</td><td>Tasso</td></tr>
            <tr>
                <td>Corrèdo?</td><td>Tasso</td></tr>
            <tr>
                <td>Ce pricìa ti ène pricìa?</td><td>Tasso</td></tr>
            <tr>
                <td>Ta pricìa, pricì ...</td><td>Tasso</td></tr>
         </table>
        <!--audio src="xiatero.mp3" autoplay>
        </audio-->
        
       <script type="text/javascript">
           
            var tabella = document.getElementById("prova").getElementsByTagName("tr");
           var x=-0;
           // var b=0;        
           // var tempi = new Array(0,1847,4211,5319,8135,9065,10548,12440,15200,17250,18230,20500,22671,24150,26540,
            //                        28109,29218,31032,32232,33145,34700,35800,36400,38106,39431,41308,42200,43500,45300,
            //                        46950,48900,51366,3783,54813,55580,56401,58759,60597);
              var tempi = new Array(0,1847,2364,1108,834,1483,1892,2760,2020,980,2270,2171,1479,3290,1569,1109,1814,1200,
                                    913,1555,1100,600,1706,1325,1887,892,1300,1650,1950,2466,2417,1030,767,821,2358,1838); 
            
            function evidenzia() {
           if(x >= tabella.length) {
                 clearInterval(s);
                    return;
           }
                for(var i=0; i < tabella.length; i++) {
                    
                    if(i == x) {
                        tabella[i].style.backgroundColor='red'; 
                    }else{
                        tabella[i].style.backgroundColor='';
                    }
                } 
                x++;
                s = setInterval("evidenzia()",tempi[x]);
            }
            
            evidenzia();
            
        </script>
    </body>
</html>

Non riesco proprio a farlo girare. Probabilmente non riesco a dichiarare correttamente l'array, ho provato in tutti i modi, ho provato a far calcolare i tempi direttamente dal programma: il tempo per ogni riga si dovrebbe ottenere sottraendo (vedi riga tempi commentata) progressivamente dal tempo successivo il tempo precedente e assegnando il valore ottenuto alla variabile tempi, ma non c'è stato niente da fare, ovvero dopo la seconda riga l'evidenziazione non rispetta i tempi e diventa estremamente veloce.
Intanto non so proprio come ringraziarti visto l'impegno e pazienza che ci stai mettendo.
Un cordiale saluto
Giuseppe

Discussione: selezione progressiva delle righe di una tabella

Strumenti Discussione

Visualizzazione

selezione progressiva delle righe di una tabella

selezione progressiva, non righe alterne

se la variabile tempo varia lo script non funziona

tag BBCode

Permessi di Scrittura