Anonymní profil peter – Programujte.com

Příspěvky odeslané z IP adresy 2001:718:2601:258:f43c:d02a:4cd8:4fab...–

peter

JavaScript, AJAX, jQuery › Rozbalovací tabulka

16. 3. 2022 #389990

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.

peter

JavaScript, AJAX, jQuery › Rozbalovací tabulka

16. 3. 2022 #389984

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>