| Autor | Zpráva | ||
|---|---|---|---|
| medved Profil |
#1 · Zasláno: 18. 12. 2018, 16:13:16
Ahojte, potřebuji schovávat a zobrazovat část tabulky. Cosi jsem skopíroplodil, ale funguje to jen v exploreru. V opeře a chromu se při znovuzobrazení schovaného řádku všechna data smrsknou do prvního sloupce. ridery.cz/tabulka.html - kliká se na tučné aaaa. Jak to vyladit?
<HTML>
<HEAD>
<script>
function zmiz(id){
cesta=document.getElementById(id).style;
cesta.display=(cesta.display == 'block')?'none':'block';
}
</script>
</HEAD>
<body LEFTMARGIN=10>
<center>
<table>
<tr><td onclick="zmiz('radek2')" STYLE="cursor:pointer"><b>aaaaaaa</td><td>aaaaaaaa</td><td>aaaaaaaaaa</td></tr>
<tr id="radek2"><td>bbbb</td><td>bbbbb</td><td>bbbbb</td></tr>
<tr><td>cccccccccc</td><td>cccccc</td><td>ccccccc</td></tr>
</table>
</center>
</BODY>
</HTML> |
||
| Kcko Profil |
#2 · Zasláno: 18. 12. 2018, 16:33:20
medved:
Tak těm buňkam nastav šířku ne? Je logické, že se to tak chová, když při togglu se zobrazí/schová řádek, kde v buňce je text delší než v předchozím řádku. |
||
| TomášK. Profil * |
#3 · Zasláno: 18. 12. 2018, 16:44:50
Kcko:
To, co ty považuješ za text, jsou ve skutečnosti tři buňky. medved zřejmě očekává, že každá sekvence bbbbbb bude ve svém sloupci, ne vše v prvním buňce. medved: Na řádky tabulky místo block použij table-row:
cesta.display=(cesta.display == 'table-row')?'none':'table-row'; |
||
| Trejpa Profil |
medved:
„všechna data smrsknou do prvního sloupce“ Nesmrsknou. Buňky přestanou být v řádku tabulky. Jejich řádek se změní na blok, takže už nemají důvod se rovnat k ostatním buňkám. Řádek tabulky nenabývá display: block, ale display: table-row. Osiřelé buňky bez tabulky se v rámci nadřazeného bloku (ne řádku) zarovnají vedle sebe, podobně jako obrázky.
Pokud potřebuješ schovávat více následujících řádků, můžeš je obalit do pojmenovaného <tbody> (s display: table-row-group). Sloupcům tabulky můžeš nastavit šířku (příklad). Chybí ti tam </b>.
EDIT: A ještě musíš otočit logiku toho přestylovávání. Protože viditelnost neměníš změnou třídy, ale přímým nahrazením parametru style, kde vstupní hodnota není vůbec zadána, tak první kliknutí reagující na tuto prázdnou hodnotu (nerovná se ani jedné z požadovaných) musí nastavit display: none, aby se na první kliknutí skryla – jinak se kliká dvakrát. Upravil jsem příklad.
|
||
| Kcko Profil |
#5 · Zasláno: 18. 12. 2018, 17:40:44
TomášK.:
Nevšiml jsem si, jak to neměl oborderované. Máš pravdu. |
||
| medved Profil |
#6 · Zasláno: 18. 12. 2018, 19:59:18
Všem moc děkuji, jdu na to...
|
||
| medved Profil |
#7 · Zasláno: 18. 12. 2018, 21:08:02
Trejpa:
Tak jsem dosáhl dílčích úspěchů, děkuji za čtení myšlenek a nabídnutí tbody a table-row-group, já bych skrýval každý řádek samostatně... Uvedenou funkci chápu, že se porovná styl zobrazení prvku jestli je "table-row-group", když ano tak se změní na "none", když není tak na "table-row-group". (Nyní to mám přehozené). Pak nechápu proč se mi první část tabulky hned neschová (prvním klikem se vršek nezmění) a skrývá se ve stejném okamžiku jako spodní. Chci aby se zobrazovala buď horní část, nebo spodní. Přepínač je zatím slovo "příslušenství" v posledním řádku. ridery.cz/typy.html. Musím udělat druhou funkci s prohozenou logikou podmínky, nebo porovnání, či jak to napsat? |
||
| Trejpa Profil |
#8 · Zasláno: 18. 12. 2018, 22:46:49
medved:
Neměň styl, měň třídu: příklad – náhled. Spíš než cyklování dokola se hodí konkrétní cílená změna. • Neukončuješ tučný text. Značka </b> je povinná. • V CSS se píší středníky do složených závorek – mezi vlastnosti, ne až za závorky. • Element TH se svým výchozím display nemůže mít margin. • Mezi parametry značek jsou povinné bílé znaky (mezery), neděláš je. • Obrázky žádné výchozí "hspace" nemají. Na nenulový odstup můžeš použít CSS margin. • Obsahem vlastnosti onclick je skript, ne závorky. • Dvě funkce spuštěné v onclick se zapisují <th onclick="a('b');c('d')">. • Colspan=3) se píše bez závorky. |
||
| medved Profil |
#9 · Zasláno: 19. 12. 2018, 08:26:52
Trejpa:
To je paráda, když se to umí! Tiše závidím. Díky. Rád bych se revanšoval, ale v html to asi nebude :-) |
||
| Kcko Profil |
medved:
Není v tom žádná věda, je to základ JS. Trejpa: Vytváříš v té funkci volba zbytečně globální proměnné, chybí Ti tam var |
||
| medved Profil |
#11 · Zasláno: 20. 12. 2018, 19:27:19
Trejpa:
Pravidlo, když dva dělají totéž, nikdy to není totéž funguje výborně. Řekl bych, že jsem to dokonale obšlahnul a stejně se mi při prvotním zobrazení ukáže celá tabulka a tobě v příkladu jen parametry. Už jsem celej vykoukanej, ale čím to je, fakt nevím. A ještě dotaz: k čemu je u .schovat pozadí red? |
||
| Trejpa Profil |
#12 · Zasláno: 20. 12. 2018, 19:53:54
medved:
Na červeném pozadí jsem si testoval funkčnost stylu a pak jsem to zapomněl smazat. Můžeš smazat. Asi jsi dal skript před tabulku. Prvotní skrytí funguje, když se pustí až po načtení tabulky, před vytvořením tabulky není co skrývat. Proto je skript také pod tabulkou. Minimálně tu část zajišťující prvotní spuštění skriptu musíš dát za tabulku nebo s jejím spuštěním počkat/reagovat až na její vykreslení. |
||
| medved Profil |
#13 · Zasláno: 20. 12. 2018, 20:08:36
Trejpa:
jo tak to je ono, super, díky |
||
| medved Profil |
#14 · Zasláno: 20. 12. 2018, 21:26:52
Trejpa:
Mohu ještě otravovat? Už to chodí jak si představuji, chyby na které jsi mě upozornil jsem snad všechny odstranil. Ještě by mě zajímalo, proč se mi po kliknutí na zobrazení parametrů, nebo příslušenství zvětší asi 3x písmo ve druhém sloupci a to pouze na mobilu a tabletu, na pc zůstává stejné. |
||
| Trejpa Profil |
#15 · Zasláno: 20. 12. 2018, 23:05:39
medved:
Zkus přidat na začátek doctype a do hlavičky značku meta pro přizpůsobení na mobilech. <!doctype html> <meta name="viewport" content="width=device-width"> |
||
| medved Profil |
#16 · Zasláno: 21. 12. 2018, 14:06:23
Trejpa:
Velikost písma se vyřešila, ale texty mimo tabulku najednou nejsou vycentrované a ještě se zalamují asi ve 25% šířky stránky, japato? Jen na mobilu... |
||
| Trejpa Profil |
#17 · Zasláno: 21. 12. 2018, 14:29:41
medved:
Šířka stránky je daná velikostí displeje. Širší tabulka ji nevlivní, jen přeteče. Vzhledem k tomu, že ti to vadí asi jen u jednoho odkazu, můžeš mu zakázat zalamování <a style="white-space:nowrap">www..cz</a>, bude se zalamovat v celku.
Nebo textu rozšiř prostor podle tabulky – třeba odstavci nastav min-width podle součtu šířek obrázků v tabulce. Ale bude zalézat za okraj obrazovky jako tabulka. Asi za nejlepší bych považoval nastavit doplňkový styl pro displeje s úzkým displejem. V něm by stačilo nastavit obrázkům v tabulce nějakou šířku v procentech, minimální šířku, a výšku automaticky. Zmenšením zanořených obrázků by se tabulka vlezla na displej a nerozšiřovala by zobrazení do strany. |
||
|
Časová prodleva: 5 let
|
|||
0