Toggle navigation
TUTORIALS
Basics Of Computer Science
HTML
HTML5
CSS
CSS3
Bootstrap 3
Bootstrap 4
Materialize CSS
JavaScript
jQuery
Ajax
AngularJS
C - Language
Java
PHP
Python
SEO
QUIZ
INTERVIEW QUESTIONS
REFERENCES
Practice Templates
Bootstrap Templates
PHP Projects
PLUGINS
Bootstrap 3 Plugins
Bootstrap 4 Plugins
Static Menus
Responsive Menus
Dropdown
Tabs & Pills
Modal Boxes (Dialog box)
Gallery Plugins
Sliders
Buttons
Dynamic Forms
Forms
Image Effects
G K
New
CURRENT AFFAIRS
New
MORE
IPC Sections
New
School Mathematics
Blog
CODE EDITOR
New
EXECUTE
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap Data Tables, Bootstrap Table Delete and Update - Free Time Learning</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"> <link href="https://cdn.datatables.net/buttons/1.5.0/css/buttons.dataTables.min.css" rel="stylesheet"> <script type="text/javascript" src="http://www.freetimelearning.com/js/jquery-1.11.3.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/buttons/1.5.0/js/dataTables.buttons.min.js"></script> </head> <body> <style type="text/css"> table{ font-size:15px; background-color:#fff; color:#333; } th{ background:#999; color:#FFF;} .modal-content{border-radius:1px !important;} .modal-header{ background-color:#EEE; color:#000; } .form{ margin:10px auto; border-radius:1px; } .btn{border-radius:2px;} </style> <div class="container" style="padding-top:30px;"> <div class="row"> <table class="table table-hover table-responsive table-bordered"> <thead> <tr> <th>ID</th> <th>First Name</th> <th>Last Name</th> <th>Email</th> <th>Edit</th> <th>Delete</th> </tr> </thead> <tbody> <tr id="d1"> <td>1</td> <td id="f1">Vijay</td> <td id="l1">Kumar</td> <td id="e1">vijaykumar012@gmail.com</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">V V Ramana</td> <td id="l2">Reddy</td> <td id="e2">vvramanareddy9963@gmail.com</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="first_name" type="text" class="form-control form" name="FirstName" placeholder="First Name"> <input id="last_name" type="text" class="form-control form" name="LastName" placeholder="Last Name"> <input id="email" type="email" class="form-control form" name="Email" placeholder="example@gmail.com"> </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 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> <script type="text/javascript"> $(document).ready(function(){ $(".update").click(function(){ var id = $(this).data("uid"); var f1 = $("#f1").html(); var l1 = $("#l1").html(); var e1 = $("#e1").html(); var f2 = $("#f2").html(); var l2 = $("#l2").html(); var e2 = $("#e2").html(); if(id==1){ $("#first_name").val(f1); $("#last_name").val(l1); $("#email").val(e1); }else if(id==2){ $("#first_name").val(f2); $("#last_name").val(l2); $("#email").val(e2); } $("#up").click(function(){ if(id==1){ var first_name = $("#first_name").val(); var last_name = $("#last_name").val(); var email = $("#email").val(); $("#f1").html(first_name); $("#l1").html(last_name); $("#e1").html(email); }else if(id==2){ var first_name = $("#first_name").val(); var last_name = $("#last_name").val(); var email = $("#email").val(); $("#f2").html(first_name); $("#l2").html(last_name); $("#e2").html(email); } }); }); $(".delete").click(function(){ var id = $(this).data("uid"); $("#del").click(function(){ if(id==1){ $("#d1").html(''); }else if(id==2){ $("#d2").html(''); } }); }); }); </script> </body> </html>
×
Close
Bootstrap Data Tables, Bootstrap Table Delete and Update - Free Time Learning
Sample Data
