Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<table> <tr> <th>Výška</th> <th>Šířka</th> <th>Vytvořit</th> <th>Viditelnost</th> <th>Odstranit</th> </tr> <tr> <form id="row1" onsubmit="return false"> <td><input name="vyska"></td> <td><input name="sirka"></td> <td><button onclick='vytvorBtn(this)'>Vytvoř</button></td> <td><button onclick='viditelnostBtn(this)'>Viditelnost</button></td> <td><button onclick='odstranBtn(this)'>Odstraň</button></td> </form> </tr> <tr> <form id="row2" onsubmit="return false"> <td><input name="vyska"></td> <td><input name="sirka"></td> <td><button onclick='vytvorBtn(this)'>Vytvoř</button></td> <td><button onclick='viditelnostBtn(this)'>Viditelnost</button></td> <td><button onclick='odstranBtn(this)'>Odstraň</button></td> </form> </tr> <tr> <form id="row3" onsubmit="return false"> <td><input name="vyska"></td> <td><input name="sirka"></td> <td><button onclick='vytvorBtn(this)'>Vytvoř</button></td> <td><button onclick='viditelnostBtn(this)'>Viditelnost</button></td> <td><button onclick='odstranBtn(this)'>Odstraň</button></td> </form> </tr> </table> <div id="misto"> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
#misto div { background-color: red; }
CSS
Autoformát
CSS reset
Až na konci
function vytvorDiv(id, vyska, sirka, kam) { var div = document.getElementById(id); var novy = false; if (!div) { div = document.createElement('div'); novy = true; } if (novy) { div.id = id; kam.appendChild(div); } div.style.width = vyska + 'px'; div.style.height = sirka + 'px'; } function zobrazSkryjDiv(id) { var div = document.getElementById(id); if (!div) { return; } div.style.display = div.style.display == 'none' ? 'block' : 'none'; } function odstranDiv(id) { var div = document.getElementById(id); if (!div) { return; } if (div.parentNode) { div.parentNode.removeChild(div); } } function vytvorBtn(btn) { var id = btn.form.id + 'div'; var vyska = parseInt(btn.form.vyska.value, 10); var sirka = parseInt(btn.form.sirka.value, 10); var kam = document.getElementById('misto'); if (vyska > 0 && sirka > 0) { vytvorDiv(id, vyska, sirka, kam); } else { alert('Zadej rozměry'); } } function viditelnostBtn(btn) { var id = btn.form.id + 'div'; zobrazSkryjDiv(id); } function odstranBtn(btn) { var id = btn.form.id + 'div'; odstranDiv(id); }
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>