"Untitled"
Bootstrap 4.1.1 Snippet by Dom-inus

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body {font-family: Arial, Helvetica, sans-serif;} * {box-sizing: border-box;} .open-button { background-color: #555; color: white; padding: 16px 20px; border: none; cursor: pointer; opacity: 0.8; position: fixed; top: 90px; left: 1000px; width: 280px; } .form-popup { display: none; max-width: 300px; border: 3px solid #f1f1f1; position: fixed; top: 150px; left: 1000px; } .form-container { padding: 10px; background-color: white; } .form-container input[type=text], .form-container input[type=number] { width: 40%; padding: 15px; margin: 5px 0 22px 0; border: none; background: #f1f1f1; } .form-container input[type=text]:focus, .form-container input[type=password]:focus { background-color: #ddd; outline: none; } .form-container .btn { background-color: #4CAF50; color: white; padding: 16px 20px; border: none; cursor: pointer; width: 40%; margin-bottom:10px; opacity: 0.8; } .form-container .cancel { background-color: red; } .divTable{ display: table; width: auto; background-color: #eee; border: 1px solid #666666; border-spacing: 5px; } .divRow{ display: table-row; width: auto; } .divCell{ float: left; display: table-column; width: 200px; background-color: #ccc; } </style> </head> <body> <h1>Shop List</h1> <div class="divTable"> <div class="headRow"> <div class="divCell">Name</div> <div class="divCell">#</div> <div class="divCell">Description</div> <div class="divCell">Price</div> </div> <div class="divRow" id="row"> <div class="divCell">001</div> <div class="divCell">002</div> <div class="divCell">003</div> <div class="divCell">004</div> <button class="delete">Remove</button> <button class="edit">Edit</button> </div> </div> <button class="open-button" onclick="openForm()">Open Form</button> <div class="form-popup" id="newProduct"> <form action="/action_page.php" class="form-container"> <h1>New Product</h1> <input type="text" placeholder="Name" id="name" required> <input type="number" placeholder="Quantity" id="quantity" required><br> <input type="text" placeholder="Description" id="description" required> <input type="number" placeholder="Price" id="price" required> <button type="button" class="btn" onclick="newRow()">Insert</button> <button type="button" class="btn cancel" onclick="closeForm()">Cancel</button> </form> </div> <script> function deleteRow() { $('.delete').click(function() { $(this).parent('.divRow').remove(); }); } $(document).ready(function(){ debugger; newRow(); editRow(); deleteRow(); }); function editRow() { $(".edit").click(function() { $(this).parent('.divRow').css({"color": "white"}); $(this).children().prop('contenteditable','true'); }); } function newRow() { $('.divTable').append("<div class='divRow' id='row'><div class='divCell'>"+document.getElementById("name").value+"</div><div class='divCell'>"+document.getElementById("quantity").value+"</div><div class='divCell'>"+document.getElementById("description").value+"</div><div class='divCell'>"+document.getElementById("price").value+"</div><button class='delete'>Remove</button><button class='edit'>Edit</button></div>"); document.getElementById("name").value=""; +document.getElementById("quantity").value="" document.getElementById("description").value=""; document.getElementById("price").value=""; closeForm(); } function openForm() { document.getElementById("newProduct").style.display = "block"; } function closeForm() { document.getElementById("newProduct").style.display = "none"; } </script> </body> </html>

Related: See More

Argon Design System

Questions / Comments: