Toggle navigation
TUTORIALS
Computers Basics
HTML
HTML5
CSS
CSS3
SEO
Bootstrap 3
Bootstrap 4
Materialize CSS
JavaScript
jQuery
Ajax
AngularJS
C - Language
Java
PHP
Python
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
QUIZ
INTERVIEW QUESTIONS
GENERAL KNOWLEDGE
CURRENT AFFAIRS
Today Current Affairs
Monthly Current Affairs
ENGLISH
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
