Zwijanie cześci tabeli

0

Oto część mojego kodu (wycięte zbędne informacje i prawie cały php):

<html>
        <head>
            <meta charset="ISO-8859-2">
            </STYLE>
        </head>
        <body link=#000000 vlink=#000000 alink=#000000>
            <table width="100%" cellspacing="0" cellpadding="0">
                <tr>
                    <td width="60%">
                    </td>
                    <td style="border-left: 1px solid black" width="40%" valign="top">
                            <!-- UKRYWANIE OD TEGO MIEJSCA -->
                            <table width="50%" cellspacing="0" cellpadding="0">
                                <tr frame="below" >
                                    <td style="text-align: center" width="100px" valign="top">
                                        <p style="line-height: 100%; "> <?php  if ($czas[6]!='NULL') echo date ("j.n - G:i:s", $czas[6]); ?> </p>
                                    </td>
                                    <td style="text-align: center" width="50px" valign="top">
                                        <p style="line-height: 100%; "> <a style="text-decoration:none" href="?send=<?php echo $file; ?>">send</a> </p>
                                    </td>
                                    <td style="text-align: left" >
                                        <p style="line-height: 100%; "> <a style="text-decoration:none" href="?read=<?php echo $file; ?>"><?php echo $file; ?></a></p>
                                    </td>
                                </tr>
                            </table>
                            <!-- UKRYWANIE DO TEGO MIEJSCA -->
                    </td>
                </tr>
            </table>
    </body>
</html>

Ogólnie wygląda to tak że po lewej stronie (60% strony) są różne textboxy i buttony, a po prawej (40% strony) jest lista plików. Po kliknięciu w plik dzieją się różne akcje (n. read wypełnia te textboxy po lewej danymi z pliku o nazwie $file). Lista plików robi się coraz dłuższa więc pomyślałem że fajnie by było dodać jakiś guzik/napis (lub taki plusik który zwija text jak w środowiskach programistycznych) do zwijania tego tekstu. W tej chwili wyświetlane sa pliki z jednego folderu. Ale po wprowadzeniu mógł bym dodać ich więcej i każdy by się zwijał/rozwijał osobno.

Moje pytanie brzmi - Czy da się to zrobić i jak to zrobić w jak najprostszy sposób (przypominam że lista jest elementem tabelki).
Znam tylko podstawy html/php. Ale jeśli dacie mi wskazówki to może sobie jakoś poradzę innych językach (JS/CSS).

Poniżej ocenzurowany obrazek jak to mniej więcej wygląda w tej chwili.
postimage

0

Aktualnie nie buduje się stron na tabelkach.

Użyj semantycznych tagów takich jak np header. Poczytaj o html5.

Poczytaj o pozycjonowaniu elementów html przy pomocy CSS. Możesz wygooglać pojęcie np flexbox.

Zmień też to kodowanie. Aktualnie koduje się w UTF-8 to standard.

Wstaw lepiej ten CSS do pliku i przypisuj po tagach. Nie widzę sensu aby kilka razy pisać to samo. Zobacz nadajesz line height w każdym znaczniku dotyczącym akapitu. Nie ma sensu wystarczyło by gdybyś napisał w pliku że dla p jest taka a taka wysokość.

0
lightinside napisał(a):

Aktualnie nie buduje się stron na tabelkach.

To nieistotne. To nie jest strona internetowa tylko generator postów na forum + wysyłanie go za pomocą curla. Odpalane na localhoscie, nikt poza mną tego nie zobaczy.

lightinside napisał(a):

Zmień też to kodowanie. Aktualnie koduje się w UTF-8 to standard.

Forum na które wysyłam posty curlem ma takie kodowanie. Używam go po to aby pominąć wiele problemów podczas przekodowywania tekstu z utf do iso.

lightinside napisał(a):

Wstaw lepiej ten CSS do pliku i przypisuj po tagach. Nie widzę sensu aby kilka razy pisać to samo. Zobacz nadajesz line height w każdym znaczniku dotyczącym akapitu. Nie ma sensu wystarczyło by gdybyś napisał w pliku że dla p jest taka a taka wysokość.

Pamiętaj że wyciąłem część kodu który nie dotyczy sprawy zwijania ;p

0

Dobrze, idąc za radami poradziłem sobie w ten sposób (kod z internetu):

<script type="text/javascript">
<!--
function pokazAlboUkryj(co) {
     var obiekt = document.getElementById(co);
     if (obiekt.style.display == 'none') {
          obiekt.style.display = 'block';
     } else {
          obiekt.style.display = 'none';
     }
}
-->
</script>


<a style="text-decoration:none" href="#lista1" onclick="pokazAlboUkryj('lista1'); return false;">Nazwa::</a>
<div id="lista1">
WYŚWIETLANIE PLIKÓW
</div>
<a style="text-decoration:none" href="#lista2" onclick="pokazAlboUkryj('lista2'); return false;">Nazwa:</a>
<div id="lista2">
WYŚWIETLANIE PLIKÓW
</div>

Dodałem też CSS do innego pliku (jest tego więcej, ale wypisze to co potrzeba):

#lista1, #lista2
{
   display: block;
}

Ogólnie wszystko działa tak jak chciałem.
Mam jeszcze jedno pytanie. Da się jakoś zapamiętać wybór rozwinięcia/zaznaczenia? Tak aby przy każdej wykonanej akcji/odświeżeniu strony nie resetowało się to?

0

Próbowałem na różne sposoby zapisać atrybut display tego diva do sesji, ale niezbyt mi się to udaje.
Bo tak chyba jest najlepiej, prawda? Aby po kliknięciu w button menu się zwijało i rozwijało za pomocą atrybutu display, chciałem ten atrybut dodać (i aktualizować po każdym kliknięciu w button) do sesji.

1 użytkowników online, w tym zalogowanych: 0, gości: 1