Tabella con box a sinistra con indice titoli del brano che compare nella cella a destra

C

cavaliere123

Utente Attivo
31 Lug 2012
416
0
16
Buonasera a tutti per prima cosa.

Ho trovato in rete e leggermente modificato questo script :

HTML: 
<HTML>
<HEAD>
<script language="javascript">

function informa(testo)
{
document.all.box_infos.innerText= testo;
document.all.box_infos.style.visibility="visible";
}

</script>

</HEAD>

<BODY>
<table border="3" width="100%">
<td border="0" width="50%">indice<b><br>
<a href="#"  onClick="informa('testo poesia');">poesia</a><br><br>

<a href="#"  onClick="informa('testo saggio');">saggio</a><br><br>

<a href="#"  onClick="informa('testo sonetto');">sonetto</a><br><br>

</td>
<td style="border:5px ridge yellow" width="50%">
<font face="courier new"><h4>
<span id="box_infos" style="visibility:hidden">
</span>
</td>
</table>

</BODY>
</HTML>

che crea in una tabella due diciamo box, in uno elenco dei titoli dei brani e nell'altro visualizza il brano richiamato on onclick.

Adesso io vorrei creare per un problema di facile gestione uno script esterno che venga richiamato dove compaiono i due array dei titoli e dei brani cosi in modo da modificare solo quest'ultimo ogni volta che debba aggiungere qualche brano.

per essere più chiaro uno script .js esterno che contenga :

HTML: 
titolo[0] = "poesia"
titolo[1] = "saggio"
titolo[2] = "sonetto"



var prosa = new Array();

prosa[0] = "testo poesia"
prosa[1] = "testo saggio"
prosa[2] = "testo sonetto"

E' possibile fare ciò... per cortesia mi aiutate ....
grazie in anticipo. Domenico .
 
Ho provato a fare cosi ma niente...

HTML: 
<html>
<head>

<script language="javascript">

var titolo = new Array();
titolo[0] = "poesia";
titolo[1] = "saggio";
titolo[2] = "sonetto";


var prosa = new Array() 
prosa[0] = "testo poesia"
prosa[1] = "testo saggio"
prosa[2] = "testo sonetto"


function informa('+prosa[i]+')
{
document.all.box_infos.innerText= prosa[i];
document.all.box_infos.style.visibility="visible";
}

 
</script>
</head>
<body>


<table border="1"> 
<tr>

 <td><b>Alunni</b><br>

<script language="javascript">
for (i=0; i<3; i++) { 
<a href="#"  onClick="informa('+prosa[i]+');">'+titolo[i]+'</a><br><br>
}
</script>

</td>

<td style="border:5px ridge yellow" width="50%">
<font face="courier new"><h4>
<span id="box_infos" style="visibility:hidden">
</span>
</td>

</tr> 

</table>

</body>
</html>

Dove sbaglio ?..... :(
 
Ciao,
innerText non è supportato da Firefox, usa innerHTML
function informa('+prosa+')
Clicca per allargare...

non è un parametro corretto basta
Codice: 
function informa(prosa) {
quando richiami la funzione poi gli puoi passare quello che vuoi
<font face="courier new"><h4>
Clicca per allargare...
non puoi mettere un elemento di blocco come <h4> dentro un elemento dilinea come <font> che tra l'altro mi sembra essere deprecato
Codice: 
for (i=0; i<3; i++) { 
                                <a href="#"  onClick="informa('+prosa[i]+');">'+titolo[i]+'</a><br><br>
                            }
se non gli dai il comando per scrivere "document.write()" difficile che javascript capisca cosa deve fare nel ciclo
penso cmq che sia meglio crearli usando il metodo appendChild()

tutti gli elementi HTML andrebbero chiusi con ilproprio tag dichiusura </>
 
Ciao e grazie per avermi risposto, allora ho seguito le tue indicazioni ed è venuto cosi :

HTML: 
<html>
<head>

<script language="javascript">

var titolo = new Array();
titolo[0] = "poesia";
titolo[1] = "saggio";
titolo[2] = "sonetto";


var prosa = new Array() 
prosa[0] = "testo poesia"
prosa[1] = "testo saggio"
prosa[2] = "testo sonetto"


function informa(prosa)
{
document.all.box_infos.innerHTML= prosa[i];
document.all.box_infos.style.visibility="visible";
}
 
</script>

</head>
<body>


<table border="1"> 
<tr>

 <td><b>Alunni</b><br>

<script language="javascript">
for (i=0; i<3; i++) { 
document.write('<a href="#"  onClick="informa('+prosa[i]+');">'+titolo[i]+'</a>')<br><br>
}
</script>

</td>

<td style="border:5px ridge yellow" width="50%">

<span id="box_infos" style="visibility:hidden">
</span>
</td>

</tr> 

</table>

</body>
</html>

purtroppo di sicuro qualcosa ho errato e poi sinceramente non ho saputo fare due cose , il fatto di chiudere i tag e metodo appendChild()...
Se ti va mettici un attimo la tua mano.... se non ti spiace... a priori ti ringrazio. Domenico.
 
HTML: 
<html>
    <head>
        <title>tabella</title>
        <script type="text/javascript">
            var titolo = new Array();
            titolo[0] = "poesia";
            titolo[1] = "saggio";
            titolo[2] = "sonetto";
            var prosa = new Array();
            prosa[0] = "testo poesia";
            prosa[1] = "testo saggio";
            prosa[2] = "testo sonetto";

            function informa(prosa)
            {
                document.getElementById("box_infos").innerHTML= prosa;
            }            
            function crea_indici() { 
                var link_indice = "";
            
                for (i=0; i<titolo.length; i++) { 
                    link_indice += '<a href="#" onclick="informa(\''+prosa[i]+'\');">'+titolo[i]+'</a><br/>';
                }
                document.getElementById("indice").innerHTML = link_indice;
            }           
        </script>
    </head>
    <body>
        <table border="1"> 
            <tr>
                <td>
                    <b>Indice</b>
                    <p id="indice"></p>
                </td>
                <td style="border:5px ridge yellow" width="220px;">
                    <h4 id="box_infos"></h4>
                </td>
            </tr> 
        </table>
        <script type="text/javascript">
            crea_indici();
        </script>
    </body>
</html>
 
Ultima modifica:
Chiaramente grazie, ho visto che hai scritto :

HTML: 
onclick="informa(\''+prosa[i]+'\')

io da neofita avrei scritto :

HTML: 
onclick="informa('+prosa[i]+')

mi spieghi per favore quando va usato la tua sintassi... altrimenti davvero non imparo...
la logica l'ho compresa ma sta benedetta sintassi... a volte forse ci azzecco pure nei miei vari tentativi ma non funziona perchè erro sintassi :(

Grazie di cuore. Domenico.
 
quando il parametro è una stringa bisogna racchiuderlo tra apici diversi da come hai aperto l'istruzione quindi con la mia sintassi
se il parametro è un intero puoi evitare gli apici e usare la tua
 
Ciao criric, desidero chiederti una cosa, se invece di testo tengo una immagine cosa scrivo vicino all'onclik ??
mi spiego meglio, ho creato dallo script che mi hai gentilmente postato una tabella che con lo stesso clik sugli elementi dell'indice mi fa comparire in varie celle delle frasi diverse e ho fatto cosi :

HTML: 
<html>


    <head>

<style type="text/css">
<!--

a.lipoesie:link    {text-decoration: none; color:black; font-size: 15px;}
a.lipoesie:hover   {color: red; font-size: 15px;}
a.lipoesie:active  {text-decoration: none; color: green; font-size: 15px;}

#saggio a.lipoesie:hover, #saggio a.lipoesie:active {width:240px; border:4px red solid;}


-->
</style>


        <script type="text/javascript">

            var titolo = new Array();
            titolo[0] = "poesia";
            titolo[1] = "saggio";
            titolo[2] = "sonetto";

            var prosa = new Array();
            prosa[0] = "testo poesia";
            prosa[1] = "testo saggio";
            prosa[2] = "testo sonetto";


             var descr = new Array();
             descr[0] = "medio";
             descr[1] = "classico";
             descr[2] = "moderno";

               
            var fotina = new Array();
            fotina[0]= "<img src='Alfieri.jpg' alt='immagine'/>";
            fotina[1]= "<img src='Aristotele.jpg' alt='immagine'/>";
            fotina[2]= "<img src='Gandhi.jpg' alt='immagine'/>";



            function leggi(prosa)
            {
                document.getElementById("box_prosa").innerHTML= prosa;
            }  
          
                  function osserva(descr)
            {
                document.getElementById("box_descr").innerHTML= descr;
            }  

                function guarda(fotina)
            {
                document.getElementById("box_fotin").innerHTML= fotina;
            }  

            function crea_prosa() { 
                var link_prosa = "";
            
                for (i=0; i<titolo.length; i++) { 
                                        link_prosa += '<a class="lipoesie" href="#" onclick="leggi(\''+prosa[i]+'\'); osserva(\''+descr[i]+'\'); guarda(\''+fotina[i]+'\'); ">'+titolo[i]+'</a><br><br>';
                }
                document.getElementById("prose").innerHTML = link_prosa;
            }
   
                  </script>
                      
                       </head>
    
                           <body>
        
               <table border="3" width="100%">

             <tr>
                <td style="border:5px ridge red"; width="30%"; colspan="1" rowspan="2">
                    <p style="text-align:center;">INDICE</p><br>
                      <div id="saggio"; style="overflow-y:auto; height:400px;">
                    <p id="prose"><br></p></div>
                </td>
                      <td><h4>
                        <div id="box_descr"; style="text-align:center;" >
                        </div>
                    </h4>
                               </td>
                         <td><h4>
                        <div id="box_fotin"; style="text-align:center;" >
                        </div>
                    </h4>
                               </td>
                          </tr>
            <tr>
                <td style="border:5px ridge yellow" width="220px;" colspan="2" rowspan="1">
                    <h4>
                        <div id="box_prosa"; style="overflow-y:auto; height:400px; text-align:center;" >
                        </div>
                    </h4>
                </td>
            </tr> 


            
        </table>
        <script type="text/javascript">
            crea_prosa();
            
            </script>
    </body>
</html>

in effetti ho aggiunto vicino all'onclik altri elementi, ma quando voglio inserire anche l'immagine non posso scrivere come ho fatto : guarda(\''+fotina+'\');, altrimenti il tutto si blocca... di sicuro problema di sintassi... mi puoi aiutare se non ti spiace :) Grazie.
 
Si è sempre una questione di apici, scrivendo
Codice: 
<img src='
con quell'apice di fatto chiudi l'apertura dell'istruzione
Codice: 
link_prosa += '
credo che questa volta facciamo prima a cambiare tattica che a capire come mettere gli apici. Prova cambiando cosi:
Codice: 
var fotina = new Array();
fotina[0]= "Alfieri";
fotina[1]= "Aristotele";
fotina[2]= "Gandhi";

function guarda(fotina)
            {
                var contenuto = "<img src='" + fotina + ".jpg' alt='" + fotina + "'/>";
                document.getElementById("box_fotin").innerHTML= contenuto;
            }

Sistema un po l'html
HTML: 
<h4>
       <div id="box_fotin"; style="overflow-y:auto; height:400px; text-align:center;" >
        </div>
 </h4>
<h4> non serve, il punto e virgola dopo id non ci va
 
Ok adesso aggiusto tutto, solo una cosa nel codice :

HTML: 
for (i=0; i<titolo.length; i++) { 
                                        link_prosa += '<a class="lipoesie" href="#" onclick="leggi(\''+prosa[i]+'\'); osserva(\''+descr[i]+'\'); guarda(\''+fotina[i]+'\'); ">'+titolo[i]+'</a><br><br>';
                }

cosa devo inserire a posto di : guarda(\''+fotina+'\'); come sintassi intendo .

Grazie :)
 
niente , lasci cosi com'è
cambia solo l'array e la funzione guarda() come ti ho postato
 
Funzionaaaaaaaaaaaa :))
Grazie davvero.... dovrò ricordarmi come definire l'array di una immagine allora, altrimenti mi ritrovo stessa problematica in altre occasioni....
adesso ti posto tutta il codice che mi sono creato, non saltare :)

HTML: 
<html>


    <head>

<style type="text/css">
<!--

a.lipoesie:link    {text-decoration: none; color:black; font-size: 15px;}
a.lipoesie:hover   {color: red; font-size: 15px;}
a.lipoesie:active  {text-decoration: none; color: green; font-size: 15px;}

#saggio a.lipoesie:hover, #saggio a.lipoesie:active {width:240px; border:4px red solid;}


-->
</style>


        <script type="text/javascript">

            var indice = new Array();
            indice[0] = "poesia";
            indice[1] = "saggio";
            indice[2] = "sonetto";
            
           
            var titolo = new Array();
            titolo[0] = "primo racconto";
            titolo[1] = "seconda poesia";
            titolo[2] = "terzo saggio";

            var autore = new Array();
            autore[0] = "Alfieri";
            autore[1] = "Aristotele";
            autore[2] = "Gandhi";

            var prosa = new Array();
            prosa[0] = "testo poesia";
            prosa[1] = "testo saggio";
            prosa[2] = "testo sonetto";


             var descr = new Array();
             descr[0] = "medio";
             descr[1] = "classico";
             descr[2] = "moderno";

               
            var fotina = new Array();
             fotina[0]= "Alfieri";
             fotina[1]= "Aristotele";
             fotina[2]= "Gandhi";


            function inizia(titolo)
            {
                document.getElementById("box_titolo").innerHTML= titolo;
            } 

            function informa(autore)
            {
                document.getElementById("box_autore").innerHTML= autore;
            } 

            function leggi(prosa)
            {
                document.getElementById("box_prosa").innerHTML= prosa;
            }  
          
                  function osserva(descr)
            {
                document.getElementById("box_descr").innerHTML= descr;
            }  

                            function guarda(fotina)
            {
                var contenuto = "<img src='" + fotina + ".jpg' alt='" + fotina + "'/>";
                document.getElementById("box_fotin").innerHTML= contenuto; }

           

            function crea_prosa() { 
                var link_prosa = "";
                var link_descr = "";
                var link_fotina = "";
               
            
                for (i=0; i<indice.length; i++) { 
                                        link_prosa += '<a class="lipoesie" href="#" onclick="inizia(\''+titolo[i]+'\'); informa(\''+autore[i]+'\'); leggi(\''+prosa[i]+'\'); osserva(\''+descr[i]+'\'); guarda(\''+fotina[i]+'\');">'+indice[i]+'</a><br><br>';
                                        
             }
                   
                document.getElementById("prose").innerHTML = link_prosa;
                 
            }
   


                  </script>
                      
                       </head>
    
                           <body>
        
               <table border="3" width="100%">

             <tr>
                <td style="border:5px ridge red"; width="30%"; colspan="1" rowspan="2">
                    <p style="text-align:center;">INDICE</p><br>
                      <div id="saggio"; style="overflow-y:auto; height:400px;">
                    <p id="prose"><br></p></div>
                </td>
                      <td style="border:5px ridge red"; width="30%";><h4>
                        <div id="box_descr"; style="text-align:justify;" >
                        </div>
                    
                               </td>
                         <td style="border:5px ridge red"; width="30%";><h4>
                        <div id="box_fotin"; style="text-align:center;" >
                        </div>
                    
                               </td>
                          </tr>
            <tr>
                <td style="border:5px ridge yellow" width="220px;" colspan="2" rowspan="1">

                    <table style="text-align: left; width: 100%;" border="1"
                       cellpadding="2" cellspacing="2">
        
                <tr>
            <td>
              <div id="box_titolo"; style="text-align:center;" >
                        </div>
                    </td>
              </tr>
                    </table>


                        <h4>
                      <div id="box_prosa"; style="overflow-y:auto; height:400px; text-align:center;" >
                        </div>
                    </h4>
                <table style="text-align: left; width: 100%;" border="1"
                 cellpadding="2" cellspacing="2">
              
          <tr>
            <td>
       <div id="box_autore"; style="text-align:center;" >
                        </div>
                   </td>
          </tr>
        
      </table>




               </td>
            </tr> 


            
        </table>
        <script type="text/javascript">
            crea_prosa();
            
            </script>
    </body>
</html>

Con un solo click faccio comparire nei vari div tutte le descrizioni dei vari array.. :)
Grazie e buona domenica .
Con stima Domenico .
 
L'unica cosa che non ho potuto per nulla aggiustare è il problema di Crome con i CSS dei link...
Con IE funziona benissimo... qui no... :(
 
Devi accedere o registrarti per poter rispondere.

Discussioni simili

L
[PHP] selezionare righe di una tabella con le checkbox e cancellarle
Risposte
2
Visite
5K
PHP
Lalli
L
G
Tabella con campo a scelta multipla (dropbox)
Risposte
1
Visite
2K
MS Access
flameseeker
flameseeker
E
Importare valori da una tabella MySQL in una tabella con checkbox
Risposte
4
Visite
2K
PHP
egialma
E
V
BOX fatto con tabella HTML da trasformare in XHTML
Risposte
6
Visite
2K
HTML e CSS
sbobby
sbobby
M
Vba maschera con campi da più tabelle salvataggio in un'unica tabella
Risposte
0
Visite
2K
MS Access
motoranocchio
M
M
Riportare in tabella HTML dati estratti con query SQL
Risposte
0
Visite
2K
MySQL
Marcello_php
M
A
Tabella con bottoni per aggiornamento record
Risposte
6
Visite
1K
PHP
antonio corizzo
A
S
problema con recupero dati tabella mysql
Risposte
2
Visite
1K
PHP
PaoloG
P
M
Tabella con riga più lunga
Risposte
6
Visite
1K
HTML e CSS
miagy
M
M
Esportare tabella in csv con intestazione di colonne
Risposte
6
Visite
3K
PHP
Max61
M
V
Come stampare su Excel tabella con rowspan e colspan
Risposte
2
Visite
1K
Javascript
marino51
marino51
M
Posizionare una tabella con scroll su un elemento specifico
Risposte
3
Visite
2K
PHP
Tommy03
Tommy03
F
Dropdown menu con tabella
Risposte
33
Visite
5K
PHP
Frozzen
F
B
Fare calcoli con php da tabella mysql
Risposte
2
Visite
1K
PHP
macus_adi
macus_adi
elpirata
Popolare campi tabella con totali estratti da database
Risposte
24
Visite
3K
PHP
elpirata
elpirata
D
[MS Access] Piu' maschere con una sola tabella dati...
Risposte
0
Visite
1K
MS Access
djduffer26
D
G
inserimento csv in tabella mysql; problema con struttura
Risposte
11
Visite
3K
PHP
marino51
marino51
A
[MS Access] Maschera per interagire con tabella excell
Risposte
19
Visite
4K
MS Access
asso3151
A
S
[PHP] Selezionare i campi non in comune con le altre colonne della tabella
Risposte
4
Visite
1K
PHP
samurai.sette
S
V
Creare tabella mysql con php non funziona
Risposte
1
Visite
1K
PHP
macus_adi
macus_adi
Alto Basso