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
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <div class="table-responsive"> <table id="table-records" class="table table-striped table-condensed cut-width"> <thead> <tr> <th><strong>A</strong></th> <th><strong>B</strong></th> <th><strong>C</strong></th> <th><strong>D</strong></th> <th><strong>E</strong></th> <th><strong>F</strong></th> </tr> </thead> <tbody> <tr class="clickable-row"> <td>aaaaa</td> <td>aaaaa</td> <td>aaaaa</td> <td>aaaaa</td> <td>aaaaa</td> <td>aaaaa</td> </tr> <tr class="clickable-row"> <td>bbbbb</td> <td>bbbbb</td> <td>bbbbb</td> <td>bbbbb</td> <td>bbbbb</td> <td>bbbbb</td> </tr> <tr class="clickable-row"> <td>ccccc</td> <td>ccccc</td> <td>ccccc</td> <td>ccccc</td> <td>ccccc</td> <td>ccccc</td> </tr> </tbody> </table> </div>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.table-striped tbody tr:nth-child(odd) td { background-color: lightgreen; } .table-striped tbody tr.table-line-yellow td { background-color: yellow !important; }
CSS
Autoformát
CSS reset
Až na konci
$('#table-records').on('click', '.clickable-row', function(event) { $(this).toggleClass('table-line-yellow').siblings().removeClass('table-line-yellow'); });
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>