Materi
Roadmap
Proyek
Sertifikat
Skillance Code Lab
Jalankan »
Skillance Code Lab Editor
Editor
Hasil
Split
Editor Kode Sumber
Tekan
Ctrl + Enter
untuk Menjalankan
<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <style> body { font-family: sans-serif; padding: 20px; background: #f8fafc; } table { width: 100%; border-collapse: collapse; margin-top: 15px; background: white; } th, td { padding: 10px 14px; border: 1px solid #cbd5e1; text-align: left; } th { background: #0d2e5c; color: white; } button { background: #00758f; color: white; border: none; padding: 8px 14px; border-radius: 6px; cursor: pointer; margin-right: 5px; } </style> </head> <body> <h3>Filter Selektor jQuery</h3> <button id="btnZebra">Beri Zebra Striping (:odd)</button> <button id="btnCek">Hitung Centang (:checked)</button> <div style="margin: 15px 0;"> <label><input type="checkbox" class="cbMateri" checked> HTML5</label> <label><input type="checkbox" class="cbMateri" checked> CSS3</label> <label><input type="checkbox" class="cbMateri"> JavaScript</label> <label><input type="checkbox" class="cbMateri"> jQuery</label> <span id="labelHitung" style="margin-left: 10px; font-weight: bold; color: #00758f;"></span> </div> <table id="tabelSiswa"> <tr><th>No</th><th>Nama Mahasiswa</th><th>Status</th></tr> <tr><td>1</td><td>Ahmad Faisal</td><td>Aktif</td></tr> <tr><td>2</td><td>Siti Rahma</td><td>Aktif</td></tr> <tr><td>3</td><td>Budi Santoso</td><td>Lulus</td></tr> <tr><td>4</td><td>Dian Anggraini</td><td>Aktif</td></tr> <tr><td>5</td><td>Eko Prasetyo</td><td>Lulus</td></tr> </table> <script> $(document).ready(function() { $('#btnZebra').click(function() { $('#tabelSiswa tr:odd').css('background-color', '#f1f5f9'); }); $('#btnCek').click(function() { const total = $('input.cbMateri:checked').length; $('#labelHitung').text('Materi terpilih: ' + total + ' dari 4'); }); }); </script> </body> </html>
Hasil Tampilan (Browser Preview)
Muat Ulang