"fist table"
Bootstrap 4.1.1 Snippet by lavan

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 ----------> <!DOCTYPE html> <html> <head> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> </head> <body> <input type="text" id="one" placeholder="name"> <input type="number" id="two" placeholder="age"> <input type="text" id="three" placeholder="Address"> <button onclick="add()">Add</button> <button onclick="update()">Update</button> <table class="table table-bordered"> <thead> <th>Sl.No</th> <th>Name</th> <th>Age</th> <th>Address</th> <th>Action</th> </thead> <tbody id="data"> </tbody> </table> <script> var newone=[] var newtwo=[] var newthree=[] function add(){ var one=document.getElementById('one').value var two=document.getElementById('two').value var three=document.getElementById('three').value newone.push(one); newtwo.push(two); newthree.push(three); listshow(); } function listshow(){ var list="" for(var i=0;i<newone.length;i++){ list+= "<tr><td>"+(i+1)+"</td>"+"<td>"+newone[i]+"</td>"+"<td>"+newtwo[i]+"</td>"+"<td>"+newthree[i]+"</td>"+"<td>"+"<button onclick='edt("+i+")'>Edit</button><button onclick='del("+i+")'>Delete</button>"+"</td></tr>" } document.getElementById('data').innerHTML=list } var load="" function edt(edit){ load=edit document.getElementById('one').value=newone[edit] document.getElementById('two').value=newtwo[edit] document.getElementById('three').value=newthree[edit] } function update(){ newone[load]=document.getElementById('one').value newtwo[load]=document.getElementById('two').value newthree[load]=document.getElementById('three').value listshow(); } function del(dok){ newone.splice(dok,1) newtwo.splice(dok,1) newthree.splice(dok,1) listshow(); } </script> </body> </html>

Related: See More

Vue Material Kit PRO
Bootstrap Tabs with Table
Creative Princing Table
BS4 Simple & Clean Pricing table

Questions / Comments: