CREATE TABLE `users` (
`id` int(11) NOT NULL,
`username` varchar(255) NOT NULL,
`name` varchar(255) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;
INSERT INTO `users` (`id`, `username`, `name`) VALUES
(8, 'Batosai23', 'Batosai Ednalan'),
(9, 'caite', 'Caite Ednalan'),
(11, 'NarutoUzumaki', 'Naruto Uzumaki'),
(12, 'SasukeUchiha', 'Sasuke Uchiha');
ALTER TABLE `users`
ADD PRIMARY KEY (`id`);
ALTER TABLE `users`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=21;
//index.php <!doctype html> <html> <head> <title>Live Editable Table using Jquery Ajax PHP and Mysqli</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script type='text/javascript'> $(document).ready(function(){ // Show Input element $('.edit').click(function(){ $('.txtedit').hide(); $(this).next('.txtedit').show().focus(); $(this).hide(); }); // Save data $(".txtedit").focusout(function(){ // Get edit id, field name and value var id = this.id; var split_id = id.split("_"); var field_name = split_id[0]; var edit_id = split_id[1]; var value = $(this).val(); // Hide Input element $(this).hide(); // Hide and Change Text of the container with input elmeent $(this).prev('.edit').show(); $(this).prev('.edit').text(value); $.ajax({ url: 'update.php', type: 'post', data: { field:field_name, value:value, id:edit_id }, success:function(response){ if(response == 1){ console.log('Save successfully'); }else{ console.log("Not saved."); } } }); }); }); </script> </head> <body > <div class="container" > <div class="row" style="padding:50px;"> <p><h1>Live Editable Table using Jquery Ajax PHP and Mysqli</h1></p> <table width='100%' border='0'> <tr> <th width='10%'>No</th> <th width='40%'>Username</th> <th width='40%'>Name</th> </tr> <?php include('dbcon.php'); $count = 1; $query = $conn->query("SELECT * FROM users order by id"); while ($row = $query ->fetch_object()) { $id = $row->id; $username = $row->username; $name = $row->name; ?> <tr> <td><?php echo $count; ?></td> <td> <div class='edit' > <?php echo $username; ?></div> <input type='text' class='txtedit' value='<?php echo $username; ?>' id='username_<?php echo $id; ?>' > </td> <td> <div class='edit' ><?php echo $name; ?> </div> <input type='text' class='txtedit' value='<?php echo $name; ?>' id='name_<?php echo $id; ?>' > </td> </tr> <?php $count ++; } ?> </table> </div> </div> <style> .edit{ width: 100%; height: 25px; } .editMode{ border: 1px solid black; } table { border:3px solid lavender; border-radius:3px; } table tr:nth-child(1){ background-color:dodgerblue; } table tr:nth-child(1) th{ color:white; padding:10px 0px; letter-spacing: 1px; } table td{ padding:10px; } table tr:nth-child(even){ background-color:lavender; color:black; } .txtedit{ display: none; width: 99%; height: 30px; } </style> </body> </html>update.php
//update.php <?php include('dbcon.php'); if(isset($_POST['field']) && isset($_POST['value']) && isset($_POST['id'])){ $field = $_POST['field']; $value = $_POST['value']; $editid = $_POST['id']; $sql = "UPDATE users SET ".$field."='".$value."' WHERE id = $editid"; $update = $conn->query($sql); echo 1; }else{ echo 0; } exit; ?>dbcon.php
//dbcon.php <?php $conn = new mysqli('localhost','root','','testingdb'); if ($conn->connect_error) { die('Error : ('. $conn->connect_errno .') '. $conn->connect_error); } ?>