Neon Vibes Table - MeggiTools
Run
Toggle Theme
Share Link
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Neon Vibes Table</title> <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css"> <style> body { font-family: 'Montserrat', sans-serif; background-color: #101010; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; color: #fff; } .table-container { width: 80%; overflow-x: auto; border-radius: 10px; padding: 20px; background: #181818; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); } table { width: 100%; border-collapse: collapse; overflow: hidden; border-radius: 10px; background: #282828; color: #fff; } th, td { padding: 15px; text-align: left; } th { background: #1c1c1c; color: #00e5ff; font-weight: 600; } td { background: #2a2a2a; } tr:hover td { background: #333; transition: background 0.3s ease; } .emoji { display: inline-block; margin-right: 5px; } .icon { display: inline-block; margin-left: 10px; color: #00e5ff; cursor: pointer; transition: color 0.3s; } .icon:hover { color: #ff00e5; } .btn { display: inline-block; background: #00e5ff; color: #fff; padding: 10px 20px; border-radius: 5px; text-align: center; cursor: pointer; transition: background 0.3s; margin-top: 15px; } .btn:hover { background: #00b3cc; } .fade-in { animation: fadeIn 1s ease-in-out; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } </style> </head> <body> <div class="table-container fade-in"> <table> <thead> <tr> <th><span class="emoji">🏷️</span> Product Name</th> <th><span class="emoji">💵</span> Price</th> <th><span class="emoji">📦</span> Stock</th> <th><span class="emoji">🔧</span> Actions</th> </tr> </thead> <tbody> <tr> <td>Apple iPhone 13</td> <td>$999</td> <td>50</td> <td> <span class="icon" onclick="editRow(this)">✏️</span> <span class="icon" onclick="deleteRow(this)">❌</span> </td> </tr> <tr> <td>Samsung Galaxy S21</td> <td>$799</td> <td>30</td> <td> <span class="icon" onclick="editRow(this)">✏️</span> <span class="icon" onclick="deleteRow(this)">❌</span> </td> </tr> <tr> <td>Google Pixel 6</td> <td>$699</td> <td>20</td> <td> <span class="icon" onclick="editRow(this)">✏️</span> <span class="icon" onclick="deleteRow(this)">❌</span> </td> </tr> </tbody> </table> <div class="btn" onclick="addRow()">➕ Add New Product</div> </div> <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> <script> function editRow(icon) { const row = icon.closest('tr'); const cells = row.querySelectorAll('td'); const productName = cells[0].innerText; const price = cells[1].innerText; const stock = cells[2].innerText; Swal.fire({ title: 'Edit Product', html: ` <input type="text" id="productName" class="swal2-input" value="${productName}" placeholder="Product Name"> <input type="text" id="price" class="swal2-input" value="${price}" placeholder="Price"> <input type="text" id="stock" class="swal2-input" value="${stock}" placeholder="Stock"> `, confirmButtonText: 'Save', focusConfirm: false, preConfirm: () => { const productNameInput = Swal.getPopup().querySelector('#productName').value; const priceInput = Swal.getPopup().querySelector('#price').value; const stockInput = Swal.getPopup().querySelector('#stock').value; if (!productNameInput || !priceInput || !stockInput) { Swal.showValidationMessage(`Please enter valid values`); } return { productName: productNameInput, price: priceInput, stock: stockInput } } }).then((result) => { if (result.isConfirmed) { cells[0].innerText = result.value.productName; cells[1].innerText = result.value.price; cells[2].innerText = result.value.stock; } }); } function deleteRow(icon) { const row = icon.closest('tr'); row.style.opacity = 0; setTimeout(() => row.remove(), 500); } function addRow() { const tableBody = document.querySelector('table tbody'); const newRow = document.createElement('tr'); newRow.innerHTML = ` <td>New Product</td> <td>$0</td> <td>0</td> <td> <span class="icon" onclick="editRow(this)">✏️</span> <span class="icon" onclick="deleteRow(this)">❌</span> </td> `; tableBody.appendChild(newRow); newRow.classList.add('fade-in'); } </script> </body> </html>