[javascript] scrollare una tabella dentro un div

[KappaJ]

in una pagina, ho un div impostato con "overflow:scroll;" che contiene una tabella.
ho la necessità, tramite un link, di far scrollare il alto la tabella fino ad evidenziare una certa riga...

se gli oggetti DIV avessero il metodo "scroll" avrei finito... ma purtroppo non ce l'hanno

ho già calcolato la distanza della riga del bordo superiore della tabella... mi manca solo di muovere la tabella...

tnx 1000 a tutti

[Mich_]

credo che ti basti l'attributo:
document.getElementById('ID_DEL_DIV').style.top = dist+'px';

dove dist e` la stringa che contiene la distanza dal bordo superiore (in px in questo caso, ma puoiusare anche em, % o altre unita` di misura).

[KappaJ]

ho già provato così... e non funziona.
penso che questo funzioni solo se l'oggetto ha "position: absolute".

[Mich_]

Puo` darsi.
Ma puoi dare position absolute (o forse basta relative) alla tabella, dentro il div.

[Xinod]

absolute o relative, credo basti sia specificato il top

anche se non è negli standard
document.getElementById('id').scrollTop
permette di rilevare e settare la quantità di pixel "scrollati" di un elemento

ciao

[dennys]

Ciao mi inserisco in questa discussione per porre un quesito :master: che si avvicina un po' a quello richiesto da KappaJ.

Io dovrei fare questo:
1) Una pagina html che contiene un menu' a tendina, in corrispondenza di ciascuna scelta si deve aprire un link (altra pagina nello specifico creata come tabella).
2) Il link dovrebbe aprirsi all'interno del documento originale
3) Visto che il collegamento si riferisce ad una tabella fare in modo che la soluzione sia univoca (viene selezionato solo il record corrispondente alla scelta) quello che succede in excel quando si imposta l'autofilter su una colonna.

sono riuscita per il punti 1 e 2 con i tag select/option (a creare il menu' a tendina) e con iframe a fare in modo che il link si apra nella stessa pagina (precisamente al disotto).
Sull'iframe pero' ho anche un altro problema: poiche' il doc. ha una certa altezza la visibilita' e' ridotta non volendo io inserire uno scroll.

Spero di essermi fatta capire ma spero soprattutto per me che la cosa sia realizzabile.
Grazie a tutti
Debora

[KappaJ]

Originariamente inviato da Xinod
absolute o relative, credo basti sia specificato il top

anche se non è negli standard
document.getElementById('id').scrollTop
permette di rilevare e settare la quantità di pixel "scrollati" di un elemento

ciao

ho provato a impostare lo scrollTop della tabella contenuta nel div, ma non cambia niente. forse non lo uso correttamente?

per dare un minimo l'idea di cosa parlo...

<div style="width:100%; height:360px; overflow:scroll>
 <table>
  <tr name="1" id="1"><td>1</td><td>1</td><td>1</td></tr>
  <tr name="2" id="2"><td>2</td><td>2</td><td>2</td></tr>
  <tr name="3" id="3"><td>3</td><td>3</td><td>3</td></tr>
  <tr name="4" id="4"><td>4</td><td>4</td><td>4</td></tr>
  <tr name="5" id="5"><td>5</td><td>5</td><td>5</td></tr>
 </table>
</div>

1
2
3
4
5

cliccando il link "5" dovrebbe scrollare la tabella fino a mettermi la riga 5 per prima...

[Mich_]

Perche` la tabella scrolli occorre che sia piu` lunga del div che la contiene.
E comunque non credo che scrolli se deve lasciare in fondo uno spazio vuoto (o meglio scrolla fino a che il fondo della tabella si posiziona sul fondo del div).

Ma se clicki "2" scrolla qualcosa o resta ferma?

Posta anche la funzione scolla() che usi.

[KappaJ]

ok... se la tabella non riempie il div, non si muove, ma io ho circa 40/50 righe o più, quindi lo riempio.

in questo caso, 50 righe e il div con le barre di scorrimento attive, se clicco su "2" dovrebbe scrollare e "nascondermi" la 1.

per scrollare, mi calcolo la distanza dal div della riga con:

fnction calcolaOffset(o)
{
	oTop = o.offsetTop
	while( o.offsetParent!=document.all.<nomeDiv>) 
	{
		oParent = o.offsetParent
		oTop += oParent.offsetTop
		o = oParent
		return oTop
	}
}

e poi provavo con
offset = calcolaOffset(document.all.<nomeRiga>);
document.getElementById('<nomeDiv>').style.top = offset;

ma ho usato anche
document.getElementById('<nomeDiv>').style.top = offset;
document.getElementById('<nomeDiv>').scrollTop -= offset;
ho provato con il nome del div, della tabella e della riga...

devo dire che non ho ben chiaro quello che faccio...

[Mich_]

Non mi torna la corrispondenza tra il codice del post sopra con quest'ultimo.

E poi cosa c'e` dentro le <...>?

Posta il codice come arriva al browser, senza eventuale codice ASP o PHP.