Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: dynamiczne zmiany textu w tabelkach
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
nu_moon
Witam!

Pzrewertowalem kilka kursow o javascript, ale niestety nie udalo mi sie uzyskac jasnej odpowiedzi na pytanie : w jaki sposob moge zmienic tekst (wyswietlony np w tabelce). Pisze wlasna galerie fotograficzna, i chcialem zrobic cos takiego :


Na dole wyswietlam miniaturki zdjec, ktore po najechaniu kursorem, zemiaja postac duzego zdjecia w gornej czesci strony, co stosunkowo jest latwe. Problem jest natomias z opisem zdjecia. Chcialbym by obok (wyswietlane w formie tabelki informacje o zdjecu (np. czas otwearcia pzreslony, jego tytul , ISO, i krotki opisk skladajacy sei z kilku linijek tekstu) zostal zamieniany rowniez po wywolaniu onmousemove().

Problem moj polega na tym, ze wiem jak zmieniac dynamicznie jedynie pola typu (INPUT type=text) co nie do konca jest rozwiazaniem problemu (moge tak ustawic ich wlasciwosui by bylu niewidoczne ramki i tlo), jednak bede tez potzrebowal pola <textarea> by wyswietlic opis do zdjecia, ale zastanawiam sie czy nie da sie tego zrobic w jakis prostszy sposob...

Szczerze mowiac, nie mam pojecia jak rozwiazac ten problem - moze ktos podrzuci kilka pomyslow ?


Z gory dzieki !
revyag
Niepotrzebne Ci inputy i textarea.
Możesz zmieniać dynamicznie zawartość elementów span i div.
Np. struktura opisu mogłaby wyglądać tak:
  1. <span id="title"></span><br />
  2. <div id="opis"></div>

a funkcja wywoływna w onmouseover może zawierać:
Kod
document.getElementById("title").innerHTML = "jakis tytul";
document.getElementById("opis").innerHTML = "jakis opis";
nu_moon
Dzieki wielkie!
Problem w tmy ze nigdzie nie moge znalezc dobrego kursu JS. Wszystki opisuja skladnie jezyka itp co juz doskonale znam, a nie natrafilem na zadne konkretniejsze opisy metod , wlasciwosci i sposobow ich wykorzystania...
TomASS
Też miałem problem ze znalezieniem odpowiedniego kursu JS.
Zobacz na Quirks Mode - bardzo fajnie napisane o JS.

Co do metod i właściwości to pomocna może być funkcja JS:
Kod
function $(id){
  return document.getElementById(id);
}

function show_atributes(element){
    var properties;
    for (i in $(element)) {
  properties += i;
  properties += ' , ';
    }
    alert(properties);
}


gdzie element to ID jakiegoś 'obiektu', np:
  1. <div id='123'>Tekst
  2. </div>
  3. <button onClick="show_atributes('123');">Klik</button>
pawel_k
tytuł sugeruje troszkę co innego ale przed chwilą skończyłem w dość nieciekawy sposób bije o dynamiczną podmianę treści w tabelach...

sprawa wyglądała tak: za pomocą js wywołuje funkcję która wykorzystując ajaxa pobierała wygenerowany przez php plik XML a następnie parsowała wstawiając do <tbody id="xxx"> odpowiednie wiersze. wszystko pięknie i cacy... ale nie pod IE... więc przestawiłem skrypt php na generowanie samego htmla (a dokladniej wierszy i kolumn) które za pomocą
Kod
document.getElementById('xxx').innerHTML = obj.responseText;
wstawiałem do tabeli... rozwiązanie może nie jest za piękne ale jest i dziala pod IE... wróć.... jednak nie działa!!! parser js wbudowany w IE wywalał "nieznany błąd", alerty pokazywały że dane za pomocą ajaxa pobierane są prawidłowo itp. wkurzony idąc po najmniejszej linni oporu tym razem całą tabele wpakowałem do <div id="xxx"> a skrypt php generuje całą tabelę która tym razem działa po wstawieniu innerHTML'em do diva, co jest rozwiązaniem paskudnym, więc zadam pytanie:

dlaczego nie działa innerHTML na <tbody>? i czy jest jakiś sposób aby wstawić całe wiersze <tr>...</tr> jako innerHTML tego znacznika?
revyag
A w jaki sposób wstawiasz wiersze? Jakoś sekwencyjnie ? Jeśli tak to możnaby wykorzystać do tego DOM'a. Pokaż kod dla pierwszej sytuacji którą opisujesz.
nu_moon
Cytat(revyag @ 3.04.2006, 15:26:00 ) *
Niepotrzebne Ci inputy i textarea.
Możesz zmieniać dynamicznie zawartość elementów span i div.
Np. struktura opisu mogłaby wyglądać tak:
  1. <span id="title"></span><br />
  2. <div id="opis"></div>

a funkcja wywoływna w onmouseover może zawierać:
Kod
document.getElementById("title").innerHTML = "jakis tytul";
document.getElementById("opis").innerHTML = "jakis opis";



Niestety ten kod nie dziala pod Internet Exporerem sadsmiley02.gif
Jakies inne propozycje?
Zajec
Musi działać, pokaż swoje złe użycie a pokażemy Ci miejsce błędu.
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.