selezione progressiva delle righe di una tabella

G

giuseppeI

Utente Attivo
25 Giu 2012
41
0
0
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?
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
 
Ultima modifica di un moderatore:
Ciao,
nell'html ci sono diversi errori

per le righe alterne puoi fare cosi:

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>
 
selezione progressiva, non righe alterne

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 [video=youtube_share;ThLidvXHC0A]http://youtu.be/ThLidvXHC0A[/video]che altro non è la registrazione del video mentre gira un programma realizzato con toolbook.

continua a darmi una mano, criric
grazie
 
Scusa, non avevo capito

prova cosi:

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>
 
Proprio così!!
Non so come ringraziarti.
adesso proverò- proveremo (vero?) a sincronizzare un file audio.
A presto.
Giuseppe
 
se la variabile tempo varia lo script non funziona

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

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>
 
Ultima modifica di un moderatore:
tag BBCode

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
 
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)
 
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
 
Ciao,
Prova ad usare setTimeout al posto di setInterval

HTML: 
      <script type="text/javascript">           
            var tabella = document.getElementById("prova").getElementsByTagName("tr");
            var x=-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);            
            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++;
                setTimeout("evidenzia()",tempi[x]);
                
            }            
            evidenzia();            
        </script>

il tempo per ogni riga si dovrebbe ottenere sottraendo progressivamente dal tempo successivo il tempo precedente
Clicca per allargare...

questa non l'ho capita
 
Ultima modifica:
Ok, funziona

HTML: 
<script type="text/javascript">
           
            var tabella = document.getElementById("prova").getElementsByTagName("tr");
            var x=0;
            var i;
            var tempo;
          var tempi = new Array(0,0,1847,4211,5319,8135,9065,10548,12440,15200,17250,18230,20500,22621,
                                24150,26540,28109,29218,31032,32232,33145,34700,35800,36400,38106,39431,
                                41308,42200,43500,45300,46950,48900,51366,53783,54813,55580,56401,58759,60597);
          
            
            function evidenzia() {
                if(x >= tabella.length) {
                    clearInterval(s);
                    return;
                }
                for(var i=0; i < tabella.length; i++) {
                  //alert (tempi[(x+1)]-tempi[(x)]);
                    if(i == x) {
                        tabella[i].style.backgroundColor='red'; 
                    }else{
                        tabella[i].style.backgroundColor='';
                    }
                } 
                x++;
             tempo=tempi[(x)]-tempi[(x-1)];
             s = setTimeout("evidenzia()",tempo);
            }
            
            evidenzia();
            
        </script>

La durata del brano è di 60597 millisecondi ossia di circa un minuto. il tempo è suddiviso tra le varie righe della tabella secondo quanto disposto dall'array e precisamente la prima riga ha una durata da 0 a 1874 millisecondi (1874-0); la seconda da 1874 a 4211 ossia 4211-1874 =2347 e così di seguito fino alla fine del brano.
Questo modo di calcolare il tempo di setTimeout può essere utile in quanto potrebbe permettere di intervenire sulla singola riga.
La variabile x all'inizio viene settata a 2, ma va bene perché si posiziona al terzo valore dell'array ossia a 1874, la durata della prima riga del brano. i primi due valori entrambi uguali a 0 permettono di utilizzare la prima riga della tabella per il titolo.

Non so ancora come ringraziarti, credo che senza il tuo intervento non sarei sicuramente riuscito a venirne a capo.
Grazie ancora
Giuseppe De Pascalis.
 
Devi accedere o registrarti per poter rispondere.

Discussioni simili

maxnegri
[Javascript] TinyDatePicker data format e selezione progressiva.
Risposte
0
Visite
2K
Javascript
maxnegri
maxnegri
I
Selezione lingue in sito
Risposte
0
Visite
1K
PHP
Ikon
I
L
Selezione rettangolare
Risposte
1
Visite
2K
Photoshop
WmbertSea
WmbertSea
E
problema selezione sfumata
Risposte
2
Visite
1K
Photoshop
chrdam
C
L
Query e selezione DB con $_POST
Risposte
2
Visite
850
PHP
Luigi1972
L
B
Selezionare un'immagine e salvare la selezione
Risposte
3
Visite
2K
Photoshop
WmbertSea
WmbertSea
F
Immagine come fosse selezione attiva
Risposte
1
Visite
1K
Photoshop
WmbertSea
WmbertSea
A
Errore visualizzazione selezione testo
Risposte
0
Visite
1K
Photoshop
Ale89
A
R
Filtro multiplo di selezione Sql
Risposte
2
Visite
1K
PHP
Max 1
Max 1
M
[PHP] Selezione da menu a discesa con 2 variabili
Risposte
0
Visite
2K
PHP
Max61
M
V
access 2007, maschera con caselle di selezione
Risposte
4
Visite
2K
Programmazione
macus_adi
macus_adi
M
[PHP] Selezione record da elenco
Risposte
24
Visite
4K
PHP
marino51
marino51
Tommy03
[PHP] Errore query selezione avg
Risposte
0
Visite
1K
PHP
Tommy03
Tommy03
G
[ASP] Incrementare un valore on the fly su selezione select
Risposte
3
Visite
2K
Classic ASP
vic53
V
W
[PHP] Come far funzionare un form di selezione
Risposte
12
Visite
3K
PHP
macus_adi
macus_adi
U
[PHP] Selezione con menu a tendina e recupero selezione
Risposte
5
Visite
9K
PHP
ugo.ugo
U
S
[WordPress] [HTML] Bordo di selezione area - Link di ancoraggio
Risposte
3
Visite
2K
WordPress
Max 1
Max 1
A
[Javascript] Selezione dinamica video
Risposte
0
Visite
1K
Javascript
anto4392
A
A
[Javascript] Selezione dinamica
Risposte
27
Visite
5K
Javascript
anto4392
A
F
Alert selezione checkbox
Risposte
6
Visite
2K
jQuery
Ibernato
Ibernato
Alto Basso