Rozbalovací tabulka – JavaScript, AJAX, jQuery – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu

Rozbalovací tabulka – JavaScript, AJAX, jQuery – Fórum – Programujte.comRozbalovací tabulka – JavaScript, AJAX, jQuery – Fórum – Programujte.com

 
Hledat
Vybavení pro Laser Game
Spuštěn Filmový magazín
Laser Game Brno
Pergoly a střechy Brno

Pavel
~ Anonymní uživatel
374 příspěvků
16. 3. 2022   #1
-
0
-

Zdravím, zkusil by jste mě někdo pomoci, případně nasměrovat, jak vytvořit rozbalovací pole pro popisné parametry produktu? Myslím tím něco, jako má třeba alza uprostřed popisu produktu viz: Parametry a specifikace zde https://www.alza.cz/hobby/yato-korunka-vrtaci-bimetalova-44-mm-d5878143.htm Budu moc vděčný, děkuji.

Nahlásit jako SPAM
IP: 2a02:768:b53d:516a:b946:1953:3d6:3ae5...–
Jerry
~ Anonymní uživatel
496 příspěvků
16. 3. 2022   #2
-
0
-

myslíš to pole "Parametry a specifikace" ???  ale zdroják si přeci mužeš stáhnout ne ? stačí se kouknout do HTML kodu

Nahlásit jako SPAM
IP: 2a00:1028:83bc:e52a:71f6:56da:b9dc:d7cb...–
peter
~ Anonymní uživatel
3895 příspěvků
16. 3. 2022   #3
-
0
-

Jestli se jedna o ty zalozky: Parametry, Foto, Alternativy... Tak se to jmenuje navigace zalozky, tab-sheet, collapse. Slova pro google. Pridej slovo javascript.

https://getbootstrap.com/docs/5.1/components/navs-tabs/#tabs
https://getbootstrap.com/…s/navs-tabs/#…

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_tabs

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial;}

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
</style>
</head>
<body>

<h2>Tabs</h2>
<p>Click on the buttons inside the tabbed menu:</p>

<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')">London</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>

<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p> 
</div>

<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

<script>
function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}
</script>
   
</body>
</html> 
Nahlásit jako SPAM
IP: 2001:718:2601:258:f43c:d02a:4cd8:4fab...–
Pavel
~ Anonymní uživatel
374 příspěvků
16. 3. 2022   #4
-
0
-

#3 peter
Ne, jedná se mi pouze o tabulku, která má v sobě popisné parametry daného produktu. Je to zhruba uprostřed toho textu, když kliknete na ten domeček vlevo od těch parametrů. Jde mi o to, že když si udělám tabulku, řekněme o 30-ti řádcích a dvou sloupcích, tak aby se zobrailo v popisu jen třeba 10 řádků a na konci bylo "čti dále" a po kliknutí na to se rozbalí zbytek. Přesně tak, jak to má ta alza. Půjčit si ty scripty od nich asi neumím, protože mi to ani nejde stáhnout, asi to mají nějak ošetřené. Každopádně moc děkuji za ochotu!

Nahlásit jako SPAM
IP: 2a02:768:b53d:516a:2126:ed9e:5650:aa98...–
Pavel
~ Anonymní uživatel
374 příspěvků
16. 3. 2022   #5
-
0
-

#2 Jerry
Stáhnout mi to nejde, ale ano jedná se o ty popisné parametry. Díky za ochotu!

Nahlásit jako SPAM
IP: 2a02:768:b53d:516a:2126:ed9e:5650:aa98...–
Jerry
~ Anonymní uživatel
496 příspěvků
16. 3. 2022   #6
-
0
-

jak nejde ? co nejde ??? jestli používáš Firefox tak si klávesou F12 zobrazíš HTML kod a normálně si ho prohlídneš... maji to udělaný jako tabulku a je to napsaný v JavaScriptu. Takže ty vidíš už jenom HTML kod. Tady máš 2 screenshot jak sem se k tomu normálně proklikal ... co je na tom nepochopitelnýho ????

když to de mě a mám 13 dipotrií na každým voku tak to musí jít i tobě ... kecko

Připojen obrázek.

Připojen obrázek.

Nahlásit jako SPAM
IP: 2a00:1028:83bc:e52a:71f6:56da:b9dc:d7cb...–
Jerry
~ Anonymní uživatel
496 příspěvků
16. 3. 2022   #7
-
0
-

...mužeš si tam dokonce vypsat i obě JavaScript funkce

function(t) {
  return void 0 !== w && w.event.triggered !== t.type ? w.event.dispatch.apply(e, arguments) : void 0
}

function() {
  var e = $(this);
  if (e.hasClass("less")) {
    var t = $("div.params").offset();
    window.scrollTo(0, t.top - 20)
  }
  var a = function(t) {
    e.parent().children(".allpar").slideToggle(700, function() {
      e.hasClass("more") ? (e.removeClass("more").addClass("less"), e.html(Alza.Web.Utils.getText("Detail_DescLess", "Méně"))) : (e.removeClass("less").addClass("more"), e.html(Alza.Web.Utils.getText("Detail_DescParamsMore", "Více parametrů"))), correctParamDottedUnderLines()
    })
  };
  e.hasClass("more") ? e.parent().children(".js-top-parameters").fadeOut(300, a) : e.parent().children(".js-top-parameters").fadeIn(300, a)
}

Nahlásit jako SPAM
IP: 2a00:1028:83bc:e52a:71f6:56da:b9dc:d7cb...–
Pavel
~ Anonymní uživatel
374 příspěvků
16. 3. 2022   #8
-
0
-

#7 Jerry
Tak se hned nečerti:-) Vůbec nepochybuju o tom, že jsi o kilometry dál než já, ale vsadím se, že si taky někdy začínal... Našel jsem dobré řešení, ale nefunguje mi s tabulkou. když u tohoto řešení použiju jen text, funguje to dobře. Tady se podívej. https://www.geeksforgeeks.org/how-to-create-show-more-and-show-less-functionality-for-hiding-text-using-javascript/

Každopádně já mám takovou tabulku, kterou vkládám do WYSIWYG editoru a tam mi to nejde. Potřebuju mít zobrazeny třeba jen tři řádky a zbytek znáš. Kdybys mi mohl poradit trošku "pro blbce", byl bych Ti moc vděčný!

Moje tabulka:  

<table style="width: 100%;">
<tbody>
<tr>
<td style="width: 48%;">Parametr 1</td>
<td style="width: 4%;"></td>
<td style="width: 48%;">Odpověď</td>
</tr>
</tbody>
</table>
<hr />
<table style="width: 100%;">
<tbody>
<tr>
<td style="width: 48%;">Parametr 2</td>
<td style="width: 4%;"></td>
<td style="width: 48%;">Odpověď</td>
</tr>
</tbody>
</table>
<hr />
<table style="width: 100%;">
<tbody>
<tr>
<td style="width: 48%;">Parametr 3</td>
<td style="width: 4%;"></td>
<td style="width: 48%;">Odpověď</td>
</tr>
</tbody>
</table>
<hr />
<table style="width: 100%;">
<tbody>
<tr>
<td style="width: 48%;">Parametr 4</td>
<td style="width: 4%;"></td>
<td style="width: 48%;">Odpověď</td>
</tr>
</tbody>
</table>
<hr />
<table style="width: 100%;">
<tbody>
<tr>
<td style="width: 48%;">Parametr 5</td>
<td style="width: 4%;"></td>
<td style="width: 48%;">Odpověď</td>
</tr>
</tbody>
</table>
<hr />
<table style="width: 100%;">
<tbody>
<tr>
<td style="width: 48%;">Parametr 6</td>
<td style="width: 4%;"></td>
<td style="width: 48%;">Odpověď</td>
</tr>
</tbody>
</table>

Nahlásit jako SPAM
IP: 2a02:768:b53d:516a:2126:ed9e:5650:aa98...–
peter
~ Anonymní uživatel
3895 příspěvků
16. 3. 2022   #9
-
0
-

Aha. uz to vidim. Ale byl to boj.
No, ale to je to same jako ty zalozky. Stejny kod, jen to trochu upravis. Idealne, kdyz misto element.style.display pouzijes element.className, hidden a nic. 

<div> tabulka1 <button>VICE</button> </div>
<div> tabulka2 <button>MENE</button> </div>

Pro skolni priklad potrebujes pomoc?

<div id='nn0'> tabulka1 <button onclick="f('nn','1')">VICE</button> </div>
<div id='nn1'> tabulka2 <button onclick="f('nn','0')">MENE</button> </div>

<style>
div.hidden {display:none;}
</style>

<script>
function $(id) {return document.getElementById(id);}
function f(name, n) {
$(name+"0").className="hidden"; // schovas 1
$(name+"1").className="hidden"; // schovas 2
$(name+n).className=""; // ukazes n
}
f('nn',1); // nastavis, aby se jedno schovalo
<script>

Jako, druha moznost je generovat to z nejakeho jsonu javascriptem. Ale, tak, kdyz neumis ani skolni priklad, tak asi nema smysl na tebe zkouset slova jako pole nebo json.
Jako treti moznost, vzit celou tabulku z html, ulozit nejak do js a uzivateli vypsat jen tech 10 radku.

Nahlásit jako SPAM
IP: 2001:718:2601:258:f43c:d02a:4cd8:4fab...–
peter
~ Anonymní uživatel
3895 příspěvků
16. 3. 2022   #10
-
0
-

https://jsfiddle.net/39gsp6q2/
- js fiddle se nelibylo asi, ze pouzivam f, tak jsem to zmenil na fff
- a take, na konci ma byt misto /script

<script>
...
</script>
Nahlásit jako SPAM
IP: 193.84.207.–
Pavel
~ Anonymní uživatel
374 příspěvků
16. 3. 2022   #11
-
0
-

#10 peter
Vypadá, že to funguje perfektně, ale nedokážu do toho zakomponovat tu tabulku. Mohl bych tě ještě nakonec poprosit, jestli bys tam nedal zkušebně pár těch řádků v tabulce, abych to celé nějak pochopil? Omlouvám se, ale opravdu se teprve učím. Moc děkuji

Nahlásit jako SPAM
IP: 2a02:768:b53d:516a:2126:ed9e:5650:aa98...–
peter
~ Anonymní uživatel
3895 příspěvků
16. 3. 2022   #12
-
0
-

Chces rici, ze nepochopis 10 radku html, css a js kodu? ani s googlem nebo jakpsatweb.cz?
div https://www.jakpsatweb.cz/html/bloky.html#div
button https://www.jakpsatweb.cz/…rmulare.html#…
html-id (css #id) / css-class (css .name, js className): https://www.jakpsatweb.cz/…y-class.html
display: https://www.jakpsatweb.cz/…display.html
get-element-by-id https://developer.mozilla.org/…tElementById

A tabulku tam mas, preci, text tabulka. To je obtizne ho nahtadit strukturou tabulky???
Treba kod z teto stranky jen zkopirovat.
https://getbootstrap.com/…tent/tables/#…

Jestli neumis zaklady html, css, tak doporucuji proletet ten jakpsatweb, tam je to nekdy i srozumitelne,.

Nahlásit jako SPAM
IP: 193.84.199.–
Pavel
~ Anonymní uživatel
374 příspěvků
17. 3. 2022   #13
-
0
-

#12 peter
Jen jsem to spletl a krátkou část tabulky jsem vkládal to prvního pole, takže jsem jí pořád viděl celou. Moc děkuju!

Nahlásit jako SPAM
IP: 2a02:768:b53d:516a:5d8e:ca86:12fe:9c33...–
peter
~ Anonymní uživatel
3895 příspěvků
18. 3. 2022   #14
-
0
-

To si tam preci muzes nastavit, ktere se ma zobrazit jako prvni. Ja ti nerozumim. Dival jsi se vubec na to, jak javascript funguje nebo ses nejaky student, ci co? No, hlavne, ze ti to funguje, tak to asi nebudeme resit.
Jde o takove jednoduche reseni, ktere, kdyz nefunguje js nebo css je celkem dost spatne, protoze se zobrazi dve tabulky. Ale, myslel jsem ti, ze by ti to mohlo stacit.

//f('nn',1);
f('nn',0);
Nahlásit jako SPAM
IP: 2001:718:2601:258:1c3e:8bdd:5306:367...–
Jerry
~ Anonymní uživatel
496 příspěvků
22. 3. 2022   #15
-
0
-

#1 Pavel
když to dobře nastyluješ mužeš použít i HTML Tag "<details>"

https://www.w3schools.com/TAgs/tryit.asp?filename=tryhtml5_details

ale podle mě to vyjde nastejno jako schovávat a ukazovat tabulku

Nahlásit jako SPAM
IP: 2a00:1028:83bc:e52a:c01e:a1ba:5da9:144c...–
Pavel
~ Anonymní uživatel
374 příspěvků
23. 3. 2022   #16
-
0
-

#15 Jerry
Děkuju.

Nahlásit jako SPAM
IP: 2a02:768:b53d:516a:5cc1:8e89:86ad:ff75...–
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 4 hosté

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032022 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý