Today, We want to share with you live table edit with jquery and ajax php.In this post we will show you inline table editing using jquery ajax php and mysql, hear for jquery editable table we will give you demo and example for implement.In this post, we will learn about PHP Inline Editing Table Using JQuery Ajax with an example.

Live Table Edit with Jquery and Ajax

Contents

Step 1: index.php

CREATE TABLE `jobs` (
`id` int(11) NOT NULL,
`name` varchar(255) NOT NULL,
`skills` varchar(255) NOT NULL,
`location` varchar(255) NOT NULL,
`gender` varchar(255) NOT NULL,
`appointment` varchar(255) NOT NULL,
`age` int(11) NOT NULL,
`image` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Step 2: Include jQuery and Tabledit plugin

jquery.tabledit.js
custom_table_edit.js
jquery.js

Step 3: index.php

<table id="response_table" class="table table-striped">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Gender</th>
<th>Age</th>
<th>Appointment</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<?php
$query_ss = "SELECT id, name, gender, location, appointment, age FROM jobs LIMIT 10";
$solutionset = mysqli_query($conn, $query_ss) or die("database error:". mysqli_error($conn));
while( $job = mysqli_fetch_assoc($solutionset) ) {
?>
<tr id="<?php echo $job ['id']; ?>">
<td><?php echo $job ['id']; ?></td>
<td><?php echo $job ['name']; ?></td>
<td><?php echo $job ['gender']; ?></td>
<td><?php echo $job ['age']; ?></td>
<td><?php echo $job ['appointment']; ?></td>
<td><?php echo $job ['location']; ?></td>
</tr>
<?php } ?>
</tbody>
</table>

Step 4: custom_table_edit.js
Make HTML table Editable with Tabledit Plugin

$(document).ready(function(){
$('#response_table').Tabledit({
deleteButton: false,
editButton: false,
columns: {
identifier: [0, 'id'],
editable: [[1, 'name'], [2, 'gender'], [3, 'age'], [4, 'appointment'], [5, 'location']]
},
hideIdentifier: true,
url: 'live_edit.php'
});
});

Step 5: live_edit.php
Save Live HTML Table Edit into MySQL Database

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

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.

Live Table Edit with Jquery and Ajax

Related posts: