Věděl bych, že lokální proměnné funkce nejsou vidět mimo tu funkci, Že ve standardní knihovně není objekt `google`. Že moje volná funkce se magicky nestane jeho metodou. Že v konzoli uvidím běhové chyby... prostě takové ty tiviality, co se člověk naučí do týdne.
Taky bych z několikařádkového ukázkového kódu poznal, kde tam je přidávání položky do pole a převod celého pole do HTML, takže přesně to bych pak v tom svém přidaném formuláři použil.
Tak tady to máš, jen tak zhruba. Nejsem webař a neříkám, že to má být zrovna takhle. Třeba CSS jsem částečně prasil vědomě a částečně protože to prostě lépe neumím, ale máš tam dost věcí, abys měl na pár dní co Googlit, pokud něčemu nerozumíš.
<html>
<head>
<style type="text/css">
.page {
padding: 0px 30px;
}
.page.active {
display: block;
}
.page.hidden {
display: none;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 20px 20px;
text-decoration: none;
}
li a:hover {
background-color: black;
}
table,
th,
td {
padding: 10px;
border-collapse: collapse;
}
#userList table {
width: 100%;
}
#userList table,
#userList th,
#userList td {
border: 1px solid black;
text-align: left;
}
#userForm table {
margin-left: auto;
margin-right: auto;
}
input[type="button"] {
display: block;
margin: auto;
padding: 10px 30px;
}
</style>
<script type="text/javascript">
class Pojistenec {
constructor(jmeno, prijmeni, vek, tel) {
this.jmeno = jmeno;
this.prijmeni = prijmeni;
this.vek = vek;
this.tel = tel;
}
}
let databaze = [
new Pojistenec("Jana", "Svobodová", 24, "+420123456789"),
new Pojistenec("Jiří", "Novák", 25, "+420123456790"),
new Pojistenec("Jan", "Novotný", 26, "+420123456791"),
];
function addUser(form) {
databaze.push(
new Pojistenec(
form.jmeno.value,
form.prijmeni.value,
+form.vek.value,
form.tel.value
)
);
renderUserList();
}
function renderUserList() {
const tbody = document.querySelector("#userList tbody");
tbody.innerHTML = "";
for (const user of databaze) {
const row = document.createElement("tr");
[user.jmeno + " " + user.prijmeni, user.tel, user.vek].forEach(
(text) => {
const td = document.createElement("td");
td.innerText = text;
row.appendChild(td);
}
);
tbody.appendChild(row);
}
}
function showPage(pageId) {
for (const page of document.querySelectorAll(".page")) {
if (page.id == pageId) {
page.classList.remove("hidden");
page.classList.add("active");
} else {
page.classList.remove("active");
page.classList.add("hidden");
}
}
}
</script>
</head>
<body onload="renderUserList()">
<ul>
<li>
<a href="#" onclick="showPage('pageUsers'); return false;">Pojištěnci</a>
</li>
<li>
<a href="#" onclick="showPage('pageAbout'); return false;">O aplikaci</a>
</li>
</ul>
<div id="pageUsers" class="page active">
<div id="userList">
<h2>Pojištěnci</h2>
<table>
<thead>
<tr>
<th>Jméno a příjmení</th>
<th>Telefon</th>
<th>Věk</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div id="userForm">
<h2>Nový pojištěnec</h2>
<form>
<table>
<tr>
<td>
<label for="jmeno">Jméno</label><br />
<input type="text" name="jmeno" />
</td>
<td>
<label for="prijmeni">Příjmení</label><br />
<input type="text" name="prijmeni" /><br />
</td>
</tr>
<tr>
<td>
<label for="vek">Věk</label><br />
<input type="number" name="vek" /><br />
</td>
<td>
<label for="tel">Telefon</label><br />
<input type="telnum" name="tel" /><br />
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="Uložit" onclick="addUser(this.form)" />
</td>
</tr>
</table>
</form>
</div>
</div>
<div id="pageAbout" class="page hidden">
<h2>Výplod v0.1</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</p>
</div>
</body>
</html>
TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Duch
Nahlásit jako SPAM
IP: 86.49.17.–
Guru
Zjistit počet nových příspěvků
