tab editor

Enter

Editor portabel

-- Radar Aktif, Bang! --

Terkirim

Pilih catatan di bawah atau buat baru

arsip klip label layer Tulis

local tanpa input

<div> <button onclick="saveData()">Save Data</button> <button onclick="hapus()">hapus</button> </div> <div id="savedData"></div> <script> function saveData() { localStorage.setItem('tanpa_input', 'ini tempat input'); tanpainput(); } function tanpainput() { const dta = localStorage.getItem('tanpa_input'); document.getElementById('savedData').innerHTML = dta ? dta:'local ini tanpa input' ; } function hapus() { localStorage.removeItem('tanpa_input'); tanpainput(); } tanpainput(); </script>

Local storage hanya muncul sekali

Strategi menggunakan "Status/Tanda" di LocalStorage seperti itu memang sangat efektif untuk mengatur apa yang harus tampil di layar tanpa harus mengandalkan isi datanya langsung. Ini trik yang sering dipakai pengembang untuk membuat fitur seperti: ​Tutorial yang hanya muncul sekali saat aplikasi dibuka pertama kali. ​Pesan sambutan (Welcome message). ​Banner promo yang kalau sudah di-close tidak akan muncul lagi.

-->

filter td dengan validasi keren

Rindi
Gofur
Faiqunnuha

Buka <div id="notifKeren" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); background:#333; color:white; padding:20px; border-radius:12px; z-index:10000; text-align:center; box-shadow: 0 4px 15px rgba(0,0,0,0.5); min-width:250px;"> <p id="teksNotif" style="margin:0; font-weight:bold;"></p> </div> <input type='text' id='input' onkeyup='searchTable()'> <table> <tr> <td>Rindi</td><td> </tr> <tr> <td>Gofur</td> </tr> <tr> <td>Faiqunnuha</td> </tr> </table> <script> function searchTable() { var input, saring, status, tbody, tr, td, i, j; var ditemukan = false; // Kita tambah variabel ini buat ngecek ada yang ketemu gak input = document.getElementById("input"); saring = input.value.toUpperCase(); tbody = document.getElementsByTagName("tbody")[0]; tr = tbody.getElementsByTagName("tr"); // 1. Cek kalau tabel kosong if (tr.length === 0) { tampilkanPesanDiv("Barang belum ada di daftar!"); return; } // 2. Proses Pencarian for (i = 0; i < tr.length; i++) { td = tr[i].getElementsByTagName("td"); status = false; // Reset status per baris for (j = 0; j < td.length; j++) { if (td[j].innerHTML.toUpperCase().indexOf(saring) > -1) { status = true; ditemukan = true; // Tandai kalau ada minimal satu yang cocok } } if (status) { tr[i].style.display = ""; } else { tr[i].style.display = "none"; } } // 3. Notifikasi (Hanya muncul kalau dicari tapi GAK ADA yang cocok) if (!ditemukan , saring !== "") { tampilkanPesanDiv("Barang '" + input.value + "' tidak ditemukan!"); } } // Fungsi pembantu biar rapi (Pakai DIV yang kita buat kemarin) function tampilkanPesanDiv(pesan) { const box = document.getElementById("notifKeren"); const teks = document.getElementById("teksNotif"); if(box , teks) { teks.innerText = pesan; box.style.display = "block"; setTimeout(() => { box.style.display = "none"; }, 2500); } } </script>