Forum PHP.pl > Położenie wiersza względem div

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Położenie wiersza względem div - offsetTop

Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript

klaudio

31.05.2012, 22:36:05

Witam

Mam taki problem. Mam DIV a w nim tabelkę. Tabelka zawiera 10 wierszy, każdy z wierszy ma na onclick funkcje "xxx". Po kliknięciu na jakiś wiersz wyświetla się alert z położeniem wiersza od góry tabeli w pixelach (czyli odległości miedzy wierszem a górna krawędzią tabeli). Mój problem polega na tym, że chce aby alert wyświetlał mi odległość klikniętego wiersza, ale nie miedzy wierszem a tabelka, tylko zewnętrznym div'em.

Z góry dziękuje za pomoc!!!

Przykład:

<html>
<body>

<div id="mydiv" style="height:130px; width:370px; font-size:12px; overflow:auto; border: 1px solid red;"> // zewnetrzny div
<table id="mytable" width="350" border="1" cellspacing="1" cellpadding="2">
<tr onclick="xxx(this)"><td>1</td></tr>
<tr onclick="xxx(this)"><td>2</td></tr>
<tr onclick="xxx(this)"><td>3</td></tr>
<tr onclick="xxx(this)"><td>4</td></tr>
<tr onclick="xxx(this)"><td>5</td></tr>
<tr onclick="xxx(this)"><td>6</td></tr>
<tr onclick="xxx(this)"><td>7</td></tr>
<tr onclick="xxx(this)"><td>8</td></tr>
<tr onclick="xxx(this)"><td>9</td></tr>
<tr onclick="xxx(this)"><td>10</td></tr>
</table>
</div>

<script>
var mytable = document.getElementById("mytable");

function xxx(obj) {
alert(mytable.rows[obj.rowIndex].offsetTop);
}

</script>

</body>
</html>

AdIoS_Neo

2.06.2012, 16:43:23

Witam,

[JAVASCRIPT] pobierz, plaintext 
<script>
var mytable = document.getElementById("mytable");
 
function xxx(obj) {
	alert("odległość wiersza od tabeli: " + mytable.rows[obj.rowIndex].offsetTop + "\nOdległość tabeli od diva:" + mytable.offsetTop);
	alert(mytable.rows[obj.rowIndex].offsetTop + mytable.offsetTop);
} 
</script>
[JAVASCRIPT] pobierz, plaintext

klaudio

5.06.2012, 10:48:00

Cytat(AdIoS_Neo @ 2.06.2012, 17:43:23 )

Witam,

[JAVASCRIPT] pobierz, plaintext 
<script>
var mytable = document.getElementById("mytable");
 
function xxx(obj) {
	alert("odległość wiersza od tabeli: " + mytable.rows[obj.rowIndex].offsetTop + "\nOdległość tabeli od diva:" + mytable.offsetTop);
	alert(mytable.rows[obj.rowIndex].offsetTop + mytable.offsetTop);
} 
</script>
[JAVASCRIPT] pobierz, plaintext

Wszystko jest ok tylko ja potrzebuje odległość wiersza od diva obejmujacego tabele

AdIoS_Neo

5.06.2012, 15:28:59

[JAVASCRIPT] pobierz, plaintext 
alert(mytable.rows[obj.rowIndex].offsetTop + mytable.offsetTop);
[JAVASCRIPT] pobierz, plaintext

Odległośc wiersza od tabeli + odległość tabeli od Div'a = odległość wiersza od div'a
Czy ja czegoś nie rozumiem ?

klaudio

6.06.2012, 10:01:44

Cytat(AdIoS_Neo @ 5.06.2012, 16:28:59 )

[JAVASCRIPT] pobierz, plaintext 
alert(mytable.rows[obj.rowIndex].offsetTop + mytable.offsetTop);
[JAVASCRIPT] pobierz, plaintext

Odległośc wiersza od tabeli + odległość tabeli od Div'a = odległość wiersza od div'a
Czy ja czegoś nie rozumiem ?

Wiec w tym wypadku dostaje caly czas stala wartosc bo (mytable.offsetTop) jest u mnie zero.

[JAVASCRIPT] pobierz, plaintext 
alert(mytable.rows[obj.rowIndex].offsetTop + mytable.offsetTop);
[JAVASCRIPT] pobierz, plaintext

Moze wytlumacze jasniej o co mi chodzi bo moze namieszalem:)

Wiec chodzi mi o to ze np. na kazdym z wierszy jest funkcja zwracajaca odleglosc wiersza od diva, czyli jak tabela ma 200 wierszy, ma skrolla i jest tak wysoka ze jest w stanie wyswietlic tylko 20 wierszy, to chodzi mi o to ze np:

Klikam w wiersz i funkcja mi zwraca ze ten wiersz ktory kliknolem jest w odleglosci np. 300px od diva otaczajacego tabele, teraz jade skrolem o 200px na dol i klikam na ten sam wiersz to funkcja mi zwraca ze teraz jest on w odleglosci 100px od diva, jade skrolem dalej i ten wiersz sie chowa to on juz mnie nie interesuje. Tylko klikam w nastepny ktory widze i wyswietla mi ze ten ma np. 200px od diva pojade skrollem w dol o 100px to i klikne w ten co poprzednio to wyswietli mi 100px i tak w kolko. Mnie interesuje tylko to co jest widocznie w divie co sie dzieje poza nim to juz mnie nie interesuje.

Pozdrawiam:)

AdIoS_Neo

6.06.2012, 11:39:35

W takim razie to powinno działać:

[JAVASCRIPT] pobierz, plaintext 
<script>
function xxx(obj) {
	alert(document.getElementById("mytable").rows[obj.rowIndex].offsetTop - document.getElementById("mydiv").scrollTop);
} 
</script>
[JAVASCRIPT] pobierz, plaintext

klaudio

6.06.2012, 16:10:47

JESTES WIELKI

Dziala tak jak chcialem, wielkie dzieki.

Pozdrawiam

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.