Create Live Editable Table with jQuery, PHP and

MySQL
Live HTML table edit or inline table edit is a very user friendly feature that enable users to edit
HTML table value directly by clicking on table cells. In our previous HTML table tutorial you have
learned HTML Table Data Export to Excel, CSV and Text using jQuery. In this tutorial you will
learn how to implement live editable HTML table with jQuery and PHP. We will use jQuery
plugin Tabledit that provides AJAX enabled in place editing for HTML table cells.

We will explain and cover this tutorial in easy steps with live demo to create editable HTML
table and save live edit changes into MySQL database table. You can also download source
code of live demo.

As we have covered this tutorial with live demo to implement live editable HTML table with
jQuery and PHP, so the file structure for this example is following.

 index.php
 custom_table_edit.js
 live_edit.php

Steps1: Create MySQL Database Table

As we will display data record in HTML Table from MySQL database and implement live HTML
table edit, so first we will create MySQL table developers and then insert few records to
display.
CREATE TABLE `developers` (
`id` int(11) NOT NULL,
`name` varchar(255) NOT NULL,
`skills` varchar(255) NOT NULL,
`address` varchar(255) NOT NULL,
`gender` varchar(255) NOT NULL,
`designation` varchar(255) NOT NULL,
`age` int(11) NOT NULL,
`image` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Steps2: Include jQuery and Tabledit plugin

As we will handle HTML Table data export using jQuery plguin Tabledit, so we will include
jQuery and plugin files in index.php.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="dist/jquery.tabledit.js"></script>
<script type="text/javascript" src="custom_table_edit.js"></script>

Steps3: Create HTML Table with Data from MySQL

Now in index.php, we will create HTML table with dynamic data from MySQL database.
<table id="data_table" class="table table-striped">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Gender</th>
<th>Age</th>
<th>Designation</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<?php
$sql_query = "SELECT id, name, gender, address, designation, age FROM developers LIMIT
10";
$resultset = mysqli_query($conn, $sql_query) or die("database
error:". mysqli_error($conn));
while( $developer = mysqli_fetch_assoc($resultset) ) {
?>
<tr id="<?php echo $developer ['id']; ?>">
<td><?php echo $developer ['id']; ?></td>
<td><?php echo $developer ['name']; ?></td>
<td><?php echo $developer ['gender']; ?></td>
<td><?php echo $developer ['age']; ?></td>
<td><?php echo $developer ['designation']; ?></td>
<td><?php echo $developer ['address']; ?></td>
</tr>
<?php } ?>
</tbody>
</table>
Steps4: Make HTML table Editable with Tabledit Plugin
In custom_table_edit.js, we will call Tabledit() function with HTML table id to make table cells
editable with required configuration. We will also use url property to make Ajax call
to live_edit.php on edit save to save edit changes into MySQL database table.
$(document).ready(function(){
$('#data_table').Tabledit({
deleteButton: false,
editButton: false,
columns: {
identifier: [0, 'id'],
editable: [[1, 'name'], [2, 'gender'], [3, 'age'], [4, 'designation'], [5, 'address']]
},
hideIdentifier: true,
url: 'live_edit.php'
});
});

Steps5: Save Live HTML Table Edit into MySQL Database

Now finally in live_edit.php, we will handle functionality to update edit changes into MySQL
database table.

<?php
include_once("db_connect.php");
$input = filter_input_array(INPUT_POST);
if ($input['action'] == 'edit') {
$update_field='';
if(isset($input['name'])) {
$update_field.= "name='".$input['name']."'";
} else if(isset($input['gender'])) {
$update_field.= "gender='".$input['gender']."'";
} else if(isset($input['address'])) {
$update_field.= "address='".$input['address']."'";
} else if(isset($input['age'])) {
$update_field.= "age='".$input['age']."'";
} else if(isset($input['designation'])) {
$update_field.= "designation='".$input['designation']."'";
}
if($update_field && $input['id']) {
$sql_query = "UPDATE developers SET $update_field WHERE id='" . $input['id'] . "'";
mysqli_query($conn, $sql_query) or die("database error:". mysqli_error($conn));
}
}
?>

You can view the live demo from the Demo link and can download the script from the
Download link below.

From: https://www.phpzag.com/create-live-editable-table-with-jquery-php-and-mysql/
jQuery Ajax Live Editable Table Records
using PHP MySQLi
By admin MySQL, PHP, Technology  0 Comments

Today, We want to share with you jQuery Ajax Live Editable Table Records using PHP MySQLi.
In this post we will show you jquery inline edit table row, hear for Inline Editing using PHP MySQL
and jQuery Ajax we will give you demo and example for implement.
In this post, we will learn about Add, Edit And Delete Records Using jQuery, Ajax, PHP And MySQL with
an example.
jQuery Ajax Live Editable Table Records using PHP
MySQLi
There are the Following The simple About jQuery Ajax Live Editable Table Records using PHP
MySQLi Full Information With Example and source code.

Steps 1: Make MySQL Database Table

I shall make MySQL table students

1. CREATE TABLE `students` (
2. `id` int(11) NOT NULL,
3. `name` varchar(255) NOT NULL,
4. `skills` varchar(255) NOT NULL,
5. `student_address` varchar(255) NOT NULL,
6. `gender` varchar(255) NOT NULL,
7. `mainsubject` varchar(255) NOT NULL,
8. `age` int(11) NOT NULL,
9. `image` varchar(255) NOT NULL
10. ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
Steps 2: Include Libs

Include external libs like jQuery and Tabledit plugin

1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
2. <script type="text/javascript" src="dist/jquery.tabledit.js"></script>
3. <script type="text/javascript" src="custom_table_edit.js"></script>

Steps 3: Make HTML Table

index.php
1. <table id="data_table" class="infinity table table-striped">
2. <thead>
3. <tr>
4. <th>Id</th>
5. <th>StudentName</th>
6. <th>Student Gender</th>
7. <th>Student Age</th>
8. <th>Main Subject</th>
9. <th>Student Address</th>
10. </tr>
11. </thead>
12. <tbody>
13. <?php
14. $live_stud_query = "SELECT id, name, gender, student_address, mainsubject, age FROM
students LIMIT 10";
15. $resultset = mysqli_query($conn, $live_stud_query) or die("database error:".
mysqli_error($conn));
16. while( $student = mysqli_fetch_assoc($resultset) ) {
17. ?>
18. <tr id="<?php echo $student ['id']; ?>">
19. <td><?php echo $student ['id']; ?></td>
20. <td><?php echo $student ['name']; ?></td>
21. <td><?php echo $student ['gender']; ?></td>
22. <td><?php echo $student ['age']; ?></td>
23. <td><?php echo $student ['mainsubject']; ?></td>
24. <td><?php echo $student ['student_address']; ?></td>
25. </tr>
26. <?php } ?>
27. </tbody>
28. </table>
Step 4: Create HTML Table Editable

Create HTML table Editable and Tabledit Plugin

1. $(document).ready(function(){
2. $('#data_table').Tabledit({
3. deleteButton: false,
4. editButton: false,
5. columns: {
6. identifier: [0, 'id'],
7. editable: [[1, 'name'], [2, 'gender'], [3, 'age'], [4, 'mainsubject'], [5, 'student_address']]
8. },
9. hideIdentifier: true,
10. url: 'live_edit.php'
11. });
12. });

Steps 5: Save Live HTML Table

live_edit.php

READ :  Vue-router - Routing using Vuejs - Dynamic Components in Vuejs

Last step in live_edit.php, I shall manage functionality to all the records update edit changes into
simple query To Save Live HTML Table Edit into MySQL Database.

1. <?php
2. include_once("db_connect.php");
3. $frm_field = filter_frm_field_array(INPUT_POST);
4. if ($frm_field['action'] == 'edit') {
5. $student_update='';
6. if(isset($frm_field['name'])) {
7. $student_update.= "name='".$frm_field['name']."'";
8. } else if(isset($frm_field['gender'])) {
9. $student_update.= "gender='".$frm_field['gender']."'";
10. } else if(isset($frm_field['student_address'])) {
11. $student_update.= "student_address='".$frm_field['student_address']."'";
12. } else if(isset($frm_field['age'])) {
13. $student_update.= "age='".$frm_field['age']."'";
14. } else if(isset($frm_field['mainsubject'])) {
 15. $student_update.= "mainsubject='".$frm_field['mainsubject']."'";
16. }
17. if($student_update && $frm_field['id']) {
18. $live_stud_query = "UPDATE students SET $student_update WHERE id='" . $frm_field['id']
. "'";
19. mysqli_query($conn, $live_stud_query) or die("database error:". mysqli_error($conn));
20. }
21. }
22. ?>

jQuery 15 Powerful Tips and Tricks for Developers and Web Designer

Read :

 Technology
 Google Adsense
 Articles

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about Create Live Editable Table with jQuery, PHP and MySQL.
I would like to have feedback on my Infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

From: https://infinityknow.com/jquery-ajax-live-editable-table-records-using-php-mysqli/