Rozbalovací tabulka

Fórum › JavaScript, AJAX, jQuery

~ Anonymní uživatel
~ 383 příspěvků

16. 3. 2022 #1

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
~ 511 příspěvků

16. 3. 2022 #2

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
~ 4014 příspěvků

16. 3. 2022 #3

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
~ 383 příspěvků

16. 3. 2022 #4

#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
~ 383 příspěvků

16. 3. 2022 #5

#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
~ 511 příspěvků

16. 3. 2022 #6

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.

Nahlásit jako SPAM

IP: 2a00:1028:83bc:e52a:71f6:56da:b9dc:d7cb...–

Jerry

~ Anonymní uživatel
~ 511 příspěvků

16. 3. 2022 #7

...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
~ 383 příspěvků

16. 3. 2022 #8

#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
~ 4014 příspěvků

16. 3. 2022 #9

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
~ 4014 příspěvků

16. 3. 2022 #10

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
~ 383 příspěvků

16. 3. 2022 #11

#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
~ 4014 příspěvků

16. 3. 2022 #12

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
~ 383 příspěvků

17. 3. 2022 #13

#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
~ 4014 příspěvků

18. 3. 2022 #14

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.