Autor Zpráva
kaprCZ
Profil
Zdravím,

mám na svém webu tabulku tvořenou z divů (nepoužívám tedy tagy typu <table><td> atp.) a potřeboval bych v této tabulce přesouvat jednotlivé řádky pomocí javascriptu a tím měnit jejich pořadí v tabulce. Každý řádek obsahuje vždy několik dalších divů vedle sebe a potřebuji, aby se po přesunu nerozházely a zůstaly v jednom řádku.

Nejsem v javascriptu ještě úplně zkušený a tak jsem to zkoušel pomocí různých návodů na netu, ale většina z nich používala právě zmíněné tabulkové tagy <tr>, <td>, tak se chci zeptat, zda je možné pro tento účel zprovoznit takovou funkci i v případě tabulky z divů. A jestliže ano, chtěl bych vás poprosit alespoň o radu, jakým směrem se vydat, aby to fungovalo.

Pokud bych měl uvést příklad, nejlépe mi fungovala třeba právě tato tabulka, bohužel jsem asi někde udělal chybu a po přepsání tabulkových tagů na divy mi script už nefungoval. Samozřejmě je mi jasné, že tagy tabulek a divy fungují úplně odlišně, takže asi nestačí vše jen tak přepsat, ale právě kvůli mé neznalosti JS nevím jak dál.

Děkuji za každou radu.
Tomáš123
Profil
kaprCZ:
mám na svém webu tabulku tvořenou z divů (nepoužívám tedy tagy typu <table><td> atp.)
Prečo nechceš používať obyčajnú HTML tabuľku? Jedná sa o tabuľkové dáta uložené v tvojej napodobenine?
kaprCZ
Profil
Tomáš123:
Pro účely, kde to potřebuji se jevila tabulka z divů jako jednodušší řešení. Jedná se o systém, kde je třeba vypínat například sloupce pomocí php skriptů, v každém sloupci mít různé šířky apod. Sice to není nic co by nešlo řešit i klasickou tabulkou, ale bylo by to nejspíš zdlouhavější. Z mojí dosavadní zkušenosti s tabulkami to bylo s divy vždy rychlejší a jednodušší. A momentálně je systém v takovém stavu, že předělávat všechny divy na tabulku a přestylovávat to by zabralo zbytečně moc času.
Taps
Profil
kaprCZ:
a můžeš nám ukázat strukturu divů
kaprCZ
Profil
Taps:
Jj, posílám v trochu osekané verzi, pro představu tam nechám jen 4 sloupce, ve výsledku jich tam je ale asi 10. Řádky se vypisují z databáze přes while().

        <div class="blok" style="width: 1745px; height: auto;">
          <div class="blok_nazev">Výpis sekcí </div>
          <div class="blok_obsah">
            <div class="sloupec_nazev" style="width: 60px;">ID sekce</div>
            <div class="sloupec_nazev" style="width: 280px;">Název sekce</div>
            <div class="sloupec_nazev" style="width: 280px;">Text</div>
            <div class="sloupec_nazev" style="width: 40px;">Pořadí</div>
            <br>
                
                    <div class="sloupec_obsah" style="width: 60px;">Zde se vypisuje id z databáze</div>
                    <div class="sloupec_obsah" style="width: 280px;">Zde se vypisuje název sekce z databáze</div>
                    <div class="sloupec_obsah" style="width: 280px;">Zde se vypisuje text z databáze</div>
                    <div class="sloupec_obsah" style="width: 40px;">Zde se vypisuje číslo pořadí z databáze</div>
                    </div>
  
          </div>
        </div>
Taps
Profil
kaprCZ:
pro inspiraci Živá ukázka
kaprCZ
Profil
Taps:
Díky moc, to dost pomůže. :)
Jen ještě dotaz – jaký je potom nejvhodnější způsob pro uložení nového pořadí do databáze? Potřeboval bych řádky vždy seřadit a po kliknutí na tlačítko Uložit odeslat hodnoty do databáze, aby při příštím zobrazení tabulky řádky zůstaly v tomto pořadí.
Taps
Profil
kaprCZ:
Upravil jsem moji ukázku, viz Živá ukázka. Při přesunu řádky jsou data odeslána prostřednictvím ajaxu. V příkladu pouze stačí upravit url adresu, na kterou chceš odesílat data. Odesílá se vždy id hodnota + pořadí řádku
kaprCZ
Profil
Taps:
Super díky moc, zachránil jsi mě a taky jsem se něčemu přiučil. Už to jede jak má.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: