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
<h1>Skrývání a počítání řádků tabulky</h1> <p>Ke svému <span onclick="radek(2)">jablíčku</span> můžu přidat <b onclick="radek(3)">červenou barvu</b>, <b onclick="radek(4)">dekoraci</b>, <b onclick="radek(5)">přepravní obal</b> a <b onclick="radek(6)">úsměv prodavače</b>. <table id=tabulka border=1 width=300 align=center><col width=70%><thead> <tr><th>co <th>za kolik <tbody> <tr><td>jablko <td>5 <tr><td>červená barva <td>3 <tr><td>lísteček <td>1.4 <tr><td>pytlík <td>0.5 <tr><td>úsměv <td>0.1 <tfoot><tr><th>celkem <th> </table> <script> var s=2; /* sloupec, ve kterém jsou čísla k sečtení */ var n=1; /* kolik řádků shora nezapočítat? (jsou nadpisem) */ var t=document.getElementById("tabulka"); /* název tabulky */ var vysledek; function soucet(){vysledek=0; for(i=n;i<t.rows.length-1;i++){if (t.rows[i].style.display!=='none') {vysledek+=parseFloat(t.rows[i].cells[s-1].innerHTML)}} t.rows[t.rows.length-1].cells[s-1].innerHTML=vysledek} function radek(r){ t.rows[r-1].style.display=(t.rows[r-1].style.display!=='')?'':'none';soucet()} /* prvotní součet */ soucet(); /* prvotní skrytí řádků, například 5 a 6 */ radek(5);radek(6); </script> <hr><ul> <li>Načítají se hodnoty přímo z tabulky, netřeba ukládat hodnotu podruhé do skriptu. <li>Každý řádek s hodnotou lze dopředu skrýt. <li>Při každé změně viditelnosti se přepočítá celá tabulka. <li>Počítá se s desetinými čísly, využívá se desetinná tečka! <li>Pro skrytí a objevení řádku tabulky se použije funkce <i>radek(<b>x</b>)</i>, kde x je řádek ke skrytí/objevení. <li>Výsledek zapisuje do posledního řádku. <li>Ve funkci je možno určit ID tabulky a pořadí sloupce s cenami. <li>Bez funkčních skriptů je vidět celá tabulka. </ul>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
td+td { text-align: center }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>