<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <table class="table table-hover table-responsive"> <thead> <tr> <th>ID</th> <th>First Name</th> <th>Last Name</th> <th>Middle Name</th> <th>Edit</th> <th>Delete</th> </tr> </thead> <tbody> <tr id="d1"> <td>1</td> <td id="f1">John</td> <td id="l1">Wick</td> <td id="m1">Doe</td> <td><button type="button" data-toggle="modal" data-target="#edit" data-uid="1" class="update btn btn-warning btn-sm"><span class="glyphicon glyphicon-pencil"></span></button></td> <td><button type="button" data-toggle="modal" data-target="#delete" data-uid="1" class="delete btn btn-danger btn-sm"><span class="glyphicon glyphicon-trash"></span></button></td> </tr> <tr id="d2"> <td>2</td> <td id="f2">Jane</td> <td id="l2">Wick</td> <td id="m2">Doe</td> <td><button type="button" data-toggle="modal" data-target="#edit" data-uid="2" class="update btn btn-warning btn-sm"><span class="glyphicon glyphicon-pencil"></span></button></td> <td><button type="button" data-toggle="modal" data-target="#delete" data-uid="2" class="delete btn btn-danger btn-sm"><span class="glyphicon glyphicon-trash"></span></button></td> </tr> </tbody> </table> </div> </div> <div id="edit" class="modal fade" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Update Data</h4> </div> <div class="modal-body"> <input id="fn" type="text" class="form-control" name="fname" placeholder="First Name"> <input id="ln" type="text" class="form-control" name="fname" placeholder="Last Name"> <input id="mn" type="text" class="form-control" name="fname" placeholder="Middle Name"> </div> <div class="modal-footer"> <button type="button" id="up" class="btn btn-warning" data-dismiss="modal">Update</button> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <div id="delete" class="modal fade" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Delete Data</h4> </div> <div class="modal-body"> <strong>Are you sure you want to delete this data?</strong> </div> <div class="modal-footer"> <button type="button" id="del" class="btn btn-danger" data-dismiss="modal">Delete</button> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div>

table{ font-family:'Calibri'; font-size:15px; background-color:#fff; color:#333; } .modal-header{ background-color:#333; color:#fff; }

$(document).ready(function(){ $(".update").click(function(){ var id = $(this).data("uid"); var f1 = $("#f1").html(); var l1 = $("#l1").html(); var m1 = $("#m1").html(); var f2 = $("#f2").html(); var l2 = $("#l2").html(); var m2 = $("#m2").html(); if(id==1){ $("#fn").val(f1); $("#mn").val(m1); $("#ln").val(l1); }else if(id==2){ $("#fn").val(f2); $("#mn").val(m2); $("#ln").val(l2); } $("#up").click(function(){ if(id==1){ var fn = $("#fn").val(); var mn = $("#mn").val(); var ln = $("#ln").val(); $("#f1").html(fn); $("#m1").html(mn); $("#l1").html(ln); }else if(id==2){ var fn = $("#fn").val(); var mn = $("#mn").val(); var ln = $("#ln").val(); $("#f2").html(fn); $("#m2").html(mn); $("#l2").html(ln); } }); }); $(".delete").click(function(){ var id = $(this).data("uid"); $("#del").click(function(){ if(id==1){ $("#d1").html(''); }else if(id==2){ $("#d2").html(''); } }); }); });