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
<title>Zvýraznění tabulky při :hoveru JavaScriptem</title> <h1>Zvýraznění tabulky při :hoveru JavaScriptem</h1> <table id="tabulka" onmousemove="zvyraznit(event)"> <colgroup> <col> <col> <col> <col> <col> </colgroup> <tr> <td>Obsah</td> <td>Obsah</td> <td>Obsah</td> <td>Obsah</td> <td>Obsah</td> </tr> <tr> <td>Obsah</td> <td>Obsah</td> <td>Obsah</td> <td>Obsah</td> <td>Obsah</td> </tr> <tr> <td>Obsah</td> <td>Obsah</td> <td>Obsah</td> <td>Obsah</td> <td>Obsah</td> </tr> <tr> <td>Obsah</td> <td>Obsah</td> <td>Obsah</td> <td>Obsah</td> <td>Obsah</td> </tr> </table>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
td { padding: .5em; } tr:hover, col.hover { background: yellow; } table { border-collapse: collapse; }
CSS
Autoformát
CSS reset
Až na konci
var aktivniSloupec = false; var sloupce = document.getElementById('tabulka').getElementsByTagName("col"); function zvyraznit(e) { if (aktivniSloupec !== false) { sloupce[aktivniSloupec].className = ""; } e = e || window.event; var bunka = (e.target || e.srcElement); if (bunka.tagName == "TD") { aktivniSloupec = bunka.cellIndex; sloupce[aktivniSloupec].className = "hover"; } }
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>