selezione progressiva delle righe di una tabella

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:

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
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>
 

giuseppeI

Utente Attivo
25 Giu 2012
41
0
0
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
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
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>
 

giuseppeI

Utente Attivo
25 Giu 2012
41
0
0
Proprio così!!
Non so come ringraziarti.
adesso proverò- proveremo (vero?) a sincronizzare un file audio.
A presto.
Giuseppe
 

giuseppeI

Utente Attivo
25 Giu 2012
41
0
0
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:

giuseppeI

Utente Attivo
25 Giu 2012
41
0
0
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
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
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

Utente Attivo
25 Giu 2012
41
0
0
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
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
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

questa non l'ho capita
 
Ultima modifica:

giuseppeI

Utente Attivo
25 Giu 2012
41
0
0
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.
 
Discussioni simili
Autore Titolo Forum Risposte Data
maxnegri [Javascript] TinyDatePicker data format e selezione progressiva. Javascript 0
L Selezione rettangolare Photoshop 1
E problema selezione sfumata Photoshop 2
L Query e selezione DB con $_POST PHP 2
B Selezionare un'immagine e salvare la selezione Photoshop 3
F Immagine come fosse selezione attiva Photoshop 1
A Errore visualizzazione selezione testo Photoshop 0
R Filtro multiplo di selezione Sql PHP 2
M [PHP] Selezione da menu a discesa con 2 variabili PHP 0
V access 2007, maschera con caselle di selezione Programmazione 4
M [PHP] Selezione record da elenco PHP 24
Tommy03 [PHP] Errore query selezione avg PHP 0
G [ASP] Incrementare un valore on the fly su selezione select Classic ASP 3
W [PHP] Come far funzionare un form di selezione PHP 12
U [PHP] Selezione con menu a tendina e recupero selezione PHP 5
S [WordPress] [HTML] Bordo di selezione area - Link di ancoraggio WordPress 3
A [Javascript] Selezione dinamica video Javascript 0
A [Javascript] Selezione dinamica Javascript 27
F Alert selezione checkbox jQuery 6
gandalf1959 mysql, selezione dati ricorrenti più volte PHP 8
E [PHP] selezione automatica lingua PHP 14
S [PHP] Selezione dati con riferimento ad altra colonna tabella PHP 22
F Mantenere selezione immagine Javascript 1
N selezione elementi Javascript 0
asevenx Cerco plugin per gestire appuntamenti con agenda e campi di selezione WordPress 4
M Visualizzare tabella in base a selezione PHP 1
G L'interno della selezione non cambia Photoshop 1
M Cambiare valore ad un campo in base alla selezione fatta nel menu a tendina PHP 16
Marco_88 Verificare la selezione degli elementi dom jQuery 2
L Selezione dinamica da form. PHP 0
M selezione da più tabelle PHP 1
F Problema selezione dinamica select/jsp/mysql Javascript 0
L elenco file immagini con checkbox di selezione PHP 1
K errore durante la selezione del Database PHP 2
D Selezione di dati da più tabelle in Mysql PHP 3
L Selezione elementi nel menù in base ad una select jQuery 1
M [risolto] Passaggio valore tramite link per selezione dati su database. PHP 3
blips Update basato sulla selezione dell'utente PHP 0
A Visualizzare albero DOM completo oppure Visualizzare Nodi che fanno parte di una Selezione Javascript 6
C Sviluppo chat con particolari criteri di selezione per web-app su mobile Offerte e Richieste di Lavoro e/o Collaborazione 1
I Submit in base alla selezione PHP 1
P come gestire la selezione data PHP 40
S selezione di una foto di una photogallery PHP 4
F Problema con selezione di un file nel database PHP 5
U Estrazione dati da un db con un menu selezione in cascata PHP 6
I come posso creare una pagina di inserimento con selezione di mensilità? PHP 1
L Selezione da database con DropDown Menu e visualizzazione PHP 10
F Inserire voci di selezione PHP 3
valient13 option che si elimina alla selezione dell'altro PHP 6
D modifica query selezione PHP 38

Discussioni simili