"Manage Work"
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 charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <nav class="navbar bg-dark navbar-dark"> <a class="navbar-brand" href="#"></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> </ul> </div> </nav> <br> <div class="container"> <div class="row"> <div class="col-sm-3"> <table id="progress" style="width:100%"> <thead> <th> <h2>In progress</h2> </th> </thead> <tbody> <tr id='addr0'></tr> </tbody> <tfoot> <td> <button id="addRow">+ Add an element</button> </td> </tfoot> </table> </div> <div class="col-sm-4"></div> <div class="col-sm-3"> <!--<table id="done"style="width:100%" ondrop="drop(event)" ondragover="allowDrop(event)"> <thead> <th> <h2>Done</h2> </th> </thead> <tbody> </tbody> </table>--> </div> </div> </div> </body> </html>
table { border-radius: 25px; background-color: lightgrey; color: black; text-align: center; margin-left:auto; margin-right:auto; } button { text-align: center; background-color: lightgrey; color: blue; border: none; } p { color: red; } .edit { width:100px; height:100px; background:orange; } .delete { width:10px; height:10px; border-radius:5px; background:orange; }
$(document).ready(function(){ alert("document loaded"); var i=0; $("#addRow").click(function(){ var work = prompt("Insert Work", "Something"); $('#addr'+i).html("<td><p type='text' id='txt' class='form-control input-md' ></td>"); $('#progress').append('<tr id="addr'+(i+1)+'"></tr>'); i++; document.getElementById('txt').innerHTML = work; }); $(document).on("click",'.delete',function(){ $(this).closest('tr').remove(); }); /* function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); }*/ }); function onload(){ $("#addbutton").on("click",addRow); var i = 1; function addRow(){ var newRow = "<tr rowID='" + i + "'>"+ "<td><div>"+$("#namebox").val()+"</div></td>"+ "<td><div><button id='" + i +"' class='delete' name='delete'type='button'>DELETE</button></div></td>"+ "<td><div><button class='edit' name='edit'type='button'>EDIT</button></div></td></tr>"; $(newRow).appendTo("#proge"); $("#namebox").val(''); i++; } }; $(document).on("click",'.delete',function(){ $(this).closest('tr').remove(); });

Related: See More

Vue Material Kit PRO

Questions / Comments: