Fissare una riga sullo schermo, di una tabella dinamica ...

[luca.gigliofior]

Ciao a tutti, ho il seguente problemino e non so come fare:

Ho una tabella dinamica, nella quale, a seconda delle select che sono state fatte appaiono più o meno record.
Ora io vorrei far si che quando i record sono molti, solo la prima riga della tabella (dove c'è la descrizione delle relative colonne) rimanesse sempre visibile in alto, in pratica vorrei far scorrere solo i record ma non la riga della descrizione.

Si puo?

[niko80]

la cosa + semplice da fare credo sia costruire 2 pagine html in una fissi l'intestazione della tabella nella seconda il contenuto

e successivamente utilizzi 2 FRAME per richiamare le pagine oppure un IFRAME

[luca.gigliofior]

Ciao, inizialmente ho fatto così, solo che pur dimensionando le due tabelle una in un fram e l'altra nell'altro, a 760 px, mi accade che la lunghezza totale rimane uguale da un frame e l'altro, ma le colonne a seconda di cio' che c'è scritto sui record non corrispondono +
più

[niko80]

potresti recuperarti la larghezza dei vari td di una riga con

document.all.idTD.offsetWidth //IE
document.getElementById("idTD").style.pixelWidth //NN

e poi applicare le varie lunghezze ai td della riga di intestazione!!

[Mich_]

La risposta "moderna" e` inserire dentro la tabella due <div>, di cui il primo contiene l'intestazione, l'altro il resto della tabella. Dato che il secondo e` lungo, dovrai prevedere la scrollbar.

Tra il dire e il fare c'e` di mezzo il mare ... Non e` una soluzione semplice da realizzare, perche` devi fare uso dei CSS, ed e` difficile trovare documentazione ed esempi, perche` pochi usano i CSS ed il box model cosi` professionalmente.

Ciao
Michele

[luca.gigliofior]

>potresti recuperarti la larghezza dei vari td di una riga con

>document.all.idTD.offsetWidth //IE
>document.getElementById("idTD").style.pixelWidt h //NN

>e poi applicare le varie lunghezze ai td della riga di intestazione!!


Mmmmm Interessante, un esempio pratico?
la pagina è gia composta due frame, quindi devo variare di volta in volta la tabella che sta nel frame più alto, due righe di esmpio?

Grazie

[niko80]

Ecco l'esempio pratico

con html del tipo:

<table border="1">
<tr>
<th id="th1" style="width: 1px;">Title col 1
</th>
<th id="th2" style="width: 1px;">Title col 2
</th>
<th id="th3" style="width: 1px;">Title col 3
</th>
<th id="th4" style="width: 1px;">Title col 4
</th>
<th id="th5" style="width: 1px;">Title col 5
</th>
<th id="th6" style="width: 1px;">Title col 6
</th>
</tr>
</table>

se window.frames[0] è il riferimento al tuo frame con la tabella in alto e lo script seguente lo metti dove c'è la tabella dinamica


per IE
window.frames[0].document.all.th1.style.width = (document.all.td1.offsetWidth);
window.frames[0].document.all.th2.style.width = (document.all.td2.offsetWidth);
.......... ecc

per NN
window.frames[0].document.getElementById("th1").style.width = (document.getElementById("td1").style.pixelWidth);
window.frames[0].document.getElementById("th2").style.width = (document.getElementById("td2").style.pixelWidth);
.......... ecc

basta mappare con gli id solo la prima riga della tua tabella dinamica

[luca.gigliofior]

Allora scusa mi sto' incartando

Nella pagina sopra del frame (topFrame) ho messo così:

<table width="760" border="1">
<tr>
<th id="th1" style="width: 86px;"><font color="#FFFF00" size="2" face="Arial, Helvetica, sans-serif">Rapportino</font></th>
<th id="th2" style="width: 76px;"><font color="#FFFF00" size="2" face="Arial, Helvetica, sans-serif">Chiamata</font></th>
<th id="th3" style="width: 149px;"><font color="#FFFF00" size="2" face="Arial, Helvetica, sans-serif">Destinatario</font></th>
<th id="th4" style="width: 119px;"><font color="#FFFF00" size="2" face="Arial, Helvetica, sans-serif">Località</font></th>
<th id="th5" style="width: 66px;"><font color="#FFFF00" size="2" face="Arial, Helvetica, sans-serif">Aperta il</font></th>
<th id="th6" style="width: 76px;"><font color="#FFFF00" size="2" face="Arial, Helvetica, sans-serif">Scadenza</font></th>
<th id="th7" style="width: 146px;"><font color="#FFFF00" size="2" face="Arial, Helvetica, sans-serif">Stato</font></th>
</tr>
</table>

Nella pagina del frame di sotto (mainFrame) ho messo lo script così:

<table width="760" border="1">
<tr>
<td><font color="#FFFF00" size="2" face="Arial, Helvetica, sans-serif">Rapportino</font></td>
<td><font color="#FFFF00" size="2" face="Arial, Helvetica, sans-serif">Chiamata</font></td>
<td><font color="#FFFF00" size="2" face="Arial, Helvetica, sans-serif">Destinatario</font></td>
<td><font color="#FFFF00" size="2" face="Arial, Helvetica, sans-serif">Località</font></td>
<td><font color="#FFFF00" size="2" face="Arial, Helvetica, sans-serif">Aperta il</font></td>
<td><font color="#FFFF00" size="2" face="Arial, Helvetica, sans-serif">Scadenza</font></td>
<td><font color="#FFFF00" size="2" face="Arial, Helvetica, sans-serif">Stato</font></td>
</tr>
<% While ((Repeat1__numRows <> 0) AND (NOT SelezioneDefault.EOF)) %>
<tr onmouseover="this.style.backgroundColor='#009999'" onmouseout="this.style.backgroundColor='transparen t'">
<script>
window.Frames[0].document.all.th1.style.width = (document.all.td1.offsetWidth);
window.Frames[0].document.all.th2.style.width = (document.all.td2.offsetWidth);
window.Frames[0].document.all.th3.style.width = (document.all.td3.offsetWidth);
window.Frames[0].document.all.th4.style.width = (document.all.td4.offsetWidth);
window.Frames[0].document.all.th5.style.width = (document.all.td5.offsetWidth);
window.Frames[0].document.all.th6.style.width = (document.all.td6.offsetWidth);
window.Frames[0].document.all.th7.style.width = (document.all.td7.offsetWidth);
</script>

<td width="86" align="left"><font color="#009999"></font><font color="#FFFFFF" face="Arial, Helvetica, sans-serif"><nobr>&CodClifor=<%=(SelezioneDefault.Fields.Item("CodCl iFor").Value)%>" target="_parent"><%=(SelezioneDefault.Fields.Item( "Numero").Value)%></nobr></font></td>
<td width="72" align="left"><font color="#009999"></font><font color="#FFFFFF" face="Arial, Helvetica, sans-serif"><nobr><%=(SelezioneDefault.Fields.Item("Cod ice1").Value)%></nobr></font></td>
<td width="149" align="left"><font color="#009999"></font><font color="#FFFFFF" face="Arial, Helvetica, sans-serif"><nobr><%DestinatarioCorto = (SelezioneDefault.Fields.Item("Destinatario").Valu e)
if len(DestinatarioCorto) > 17 then
DestinatarioCorto = Left(DestinatarioCorto,14) & "..."
response.write (DestinatarioCorto)
else
response.write (DestinatarioCorto)
end if%></nobr></font></td>
<td width="119" align="left"><font color="#009999"></font><font color="#FFFFFF" face="Arial, Helvetica, sans-serif"><nobr><%CittaCorta =(SelezioneDefault.Fields.Item("Citta").Value)
if len(CittaCorta) > 7 then
CittaCorta = Left(CittaCorta,4) & "..."
response.write (CittaCorta)
else
response.write (CittaCorta) end if%></nobr></font></td>
<td width="66" align="left"><font color="#009999"></font><font color="#FFFFFF" face="Arial, Helvetica, sans-serif"><nobr><%=Oggetto_data.conversione_out(Selez ioneDefault.Fields.Item("DataDoc").Value)%></nobr></font></td>
<td width="76" align="left"><font color="#009999"></font><font color="#FFFFFF" face="Arial, Helvetica, sans-serif"><nobr><%=Oggetto_data.conversione_secondi_o ut(SelezioneDefault.Fields.Item("Scadenze2").Value )%></nobr></font></td>
<td width="146" align="left"><font color="#009999"></font><font color="#FFFFFF" face="Arial, Helvetica, sans-serif"><nobr>
<% if (SelezioneDefault.Fields.Item("Stato").Value) =1 then response.write ("Aperto")end if
if (SelezioneDefault.Fields.Item("Stato").Value) =2 then response.write ("Sost. provv.") end if
if (SelezioneDefault.Fields.Item("Stato").Value) =3 then response.write ("Chiuso") end if
if (SelezioneDefault.Fields.Item("Stato").Value) =4 then response.write ("Annullato") end if%>
</nobr></font></td>
</tr>
<%


Repeat1__index=Repeat1__index+1
Repeat1__numRows=Repeat1__numRows-1
SelezioneDefault.MoveNext()
Wend
%>
</table>

Suppongo che non fà nullo poichè sul topFrame devo definire il riferimento a window.frames[0] giusto?
Se si come faccio?

Grazie ancora

[niko80]

Supponevi be va sostituito il

window.frame[0] con window.top.frames[0]

inoltre ho fatto qualke prova e l'unico problema che sembra verificarsi è che, se la tabella nel frame inferiore è troppo grande, quindi c'è uno scrolling orizzontale, si diseallinea con quella del fram superiore che non può scrollare, di seguito ci sono le tra pagine di prova che ho fatto:

frame.html
<html>
<head>
</head>
<frameset rows="20%,*" >
<frame src="pagina1.html" name="header" >
<frame src="pagina2.html" name="principale" >
</frameset>
<noframes>
<body bgcolor="#FFFFFF" text="#000000">
</body>
</noframes>
</html>

pagina1.html
<html>
<head>
</head>
<body>
<table border=1>
<tr>
<th id="th1" style="width: 1px;">Title col 1
</th>
<th id="th2" style="width: 1px;">Title col 2
</th>
<th id="th3" style="width: 1px;">Title col 3
</tr>
</table>
</body>
</html>

pagina2.html
<html>
<body>
<table border="1">
<tr>
<td id="td1">blablablabla</td>
<td id="td2">blablablablablablablabla</td>
<td id="td3">blablablabla</td>
</tr>
<tr>
<td>bla bla bla bla bla bla bla bla bla bla bla bla bla </td>
<td>bla bla bla bla bla bla bla bla bla </td>
<td>bla </td>
</tr>
<tr>
<td>bla bla bla bla </td>
<td>bla bla bla bla bla </td>
<td>bla bla bla bla bla bla </td>
</tr>
<tr>
<td>blablablablablablablablablablablablablablablab lablablablablablablablablablablablablablabla</td>
<td>blablablablablabla</td>
<td>blablablablablablablablablablablabla</td>
</tr>
<tr>
<td>blablablablablabla</td>
<td>blabla</td>
<td>blabla</td>
</tr>
</table>
<body>
</html>
<script>
window.top.frames[0].document.all.th1.style.width = (document.all.td1.offsetWidth);
window.top.frames[0].document.all.th2.style.width = (document.all.td2.offsetWidth);
window.top.frames[0].document.all.th3.style.width = (document.all.td3.offsetWidth);
</script>