Inline data editing provides an easy way to edit data in table cells without loading another component. If your web application has data grid functionality, inline edit & delete is the must-have feature. The user can edit and delete content on the same page by clicking the row in the table. Inline table data editing<\/b> provides a better user experience and makes the web application user-friendly.<\/p>\n
Live table editing functionality can be easily integrated with jQuery and Ajax. In this tutorial, we will show you how to implement inline edit and delete<\/b> functionality using jQuery, AJAX, PHP, and MySQL.<\/p>\n
The following functionality will be implemented in our example code.<\/p>\n
Before getting started to build an inline data editing script, take a look at the file structure.<\/p>\n
inline_table_data_editing_with_php\/<\/span>\r\n\u251c\u2500\u2500 DB.class.php\r\n\u251c\u2500\u2500 index.php\r\n\u251c\u2500\u2500 userAction.php\r\n\u251c\u2500\u2500 images\/<\/span>\r\n\u251c\u2500\u2500 js\/<\/span>\r\n\u2502 \u2514\u2500\u2500 jquery.min.js\r\n\u2514\u2500\u2500 css\/<\/span>\r\n \u251c\u2500\u2500 style.css\r\n \u2514\u2500\u2500 bootstrap.min\r\n<\/pre>\nCreate Database Table<\/h2>\n
A table is required in the database to store the HTML table for inline editing dynamically. The following SQL creates a members<\/code> table in the database with some basic fields.<\/p>\nCREATE<\/span> TABLE<\/span> `members`<\/span> (\r\n `id`<\/span> int<\/span>(11<\/span>) NOT<\/span> NULL<\/span> AUTO_INCREMENT,\r\n `first_name`<\/span> varchar<\/span>(25<\/span>) COLLATE<\/span> utf8_unicode_ci NOT<\/span> NULL<\/span>,\r\n `last_name`<\/span> varchar<\/span>(25<\/span>) COLLATE<\/span> utf8_unicode_ci NOT<\/span> NULL<\/span>,\r\n `email`<\/span> varchar<\/span>(50<\/span>) COLLATE<\/span> utf8_unicode_ci NOT<\/span> NULL<\/span>,\r\n `created`<\/span> datetime NOT<\/span> NULL<\/span>,\r\n `modified`<\/span> datetime NOT<\/span> NULL<\/span> DEFAULT<\/span> current_timestamp<\/span>(),\r\n `status`<\/span> enum('Active'<\/span>,'Inactive'<\/span>) COLLATE<\/span> utf8_unicode_ci NOT<\/span> NULL<\/span>,\r\n PRIMARY KEY<\/span> (`id`<\/span>)\r\n) ENGINE<\/span>=InnoDB<\/span> DEFAULT<\/span> CHARSET<\/span>=utf8 COLLATE<\/span>=utf8_unicode_ci;<\/pre>\nNow, insert some data in the members table.<\/p>\n
INSERT<\/span> INTO<\/span> `members`<\/span> (`id`<\/span>, `first_name`<\/span>, `last_name`<\/span>, `email`<\/span>, `created`<\/span>, `modified`<\/span>, `status`<\/span>) VALUES<\/span>\r\n(NULL<\/span>, 'John'<\/span>, 'Doe'<\/span>, 'john.doe@gmail.com'<\/span>, NOW<\/span>(), NOW<\/span>(), 'Active'<\/span>),\r\n(NULL<\/span>, 'Gary'<\/span>, 'Riley'<\/span>, 'gary@hotmail.com'<\/span>, NOW<\/span>(), NOW<\/span>(), 'Active'<\/span>),\r\n(NULL<\/span>, 'Edward'<\/span>, 'Siu'<\/span>, 'siu.edward@gmail.com'<\/span>, NOW<\/span>(), NOW<\/span>(), 'Active'<\/span>);<\/pre>\nDatabase Class (DB.class.php)<\/h2>\n
The DB Class handles the database related operations (connect, update, and delete) with PHP and MySQL.<\/p>\n
\n__construct()<\/code> – Connect and select the MySQL database.<\/li>\ngetRows()<\/code> – Fetch data from the members table and returns the data as an array.<\/li>\nupdate()<\/code> – Update member data in the database.<\/li>\ndelete()<\/code> – Remove member data from the database.<\/li>\n<\/ul>\nSpecify the database host ($dbHost<\/code>), username ($dbUsername<\/code>), password ($dbPassword<\/code>), and name ($dbName<\/code>) in the respective variables.<\/p>\n<?php
<\/span>class <\/span>DB<\/span>{
private <\/span>$dbHost <\/span>= <\/span>\"localhost\"<\/span>;
private <\/span>$dbUsername <\/span>= <\/span>\"root\"<\/span>;
private <\/span>$dbPassword <\/span>= <\/span>\"root\"<\/span>;
private <\/span>$dbName <\/span>= <\/span>\"codexworld_db\"<\/span>;
private <\/span>$table <\/span>= <\/span>\"members\"<\/span>;
public function <\/span>__construct<\/span>(){
if(!isset(<\/span>$this<\/span>-><\/span>db<\/span>)){
<\/span>\/\/ Connect to the database
<\/span>$conn <\/span>= new <\/span>mysqli<\/span>(<\/span>$this<\/span>-><\/span>dbHost<\/span>, <\/span>$this<\/span>-><\/span>dbUsername<\/span>, <\/span>$this<\/span>-><\/span>dbPassword<\/span>, <\/span>$this<\/span>-><\/span>dbName<\/span>);
if(<\/span>$conn<\/span>-><\/span>connect_error<\/span>){
die(<\/span>\"Failed to connect with MySQL: \" <\/span>. <\/span>$conn<\/span>-><\/span>connect_error<\/span>);
}else{
<\/span>$this<\/span>-><\/span>db <\/span>= <\/span>$conn<\/span>;
}
}
}
<\/span>\/*
* Returns rows from the database based on the conditions
* @param array select, where, order_by, limit and return_type conditions
*\/
<\/span>public function <\/span>getRows<\/span>(<\/span>$conditions <\/span>= array()){
<\/span>$sql <\/span>= <\/span>'SELECT '<\/span>;
<\/span>$sql <\/span>.= <\/span>array_key_exists<\/span>(<\/span>\"select\"<\/span>,<\/span>$conditions<\/span>)?<\/span>$conditions<\/span>[<\/span>'select'<\/span>]:<\/span>'*'<\/span>;
<\/span>$sql <\/span>.= <\/span>\" FROM <\/span>{<\/span>$this<\/span>-><\/span>table<\/span>}<\/span> \"<\/span>;
if(<\/span>array_key_exists<\/span>(<\/span>\"where\"<\/span>,<\/span>$conditions<\/span>)){
<\/span>$sql <\/span>.= <\/span>' WHERE '<\/span>;
<\/span>$i <\/span>= <\/span>0<\/span>;
foreach(<\/span>$conditions<\/span>[<\/span>'where'<\/span>] as <\/span>$key <\/span>=> <\/span>$value<\/span>){
<\/span>$pre <\/span>= (<\/span>$i <\/span>> <\/span>0<\/span>)?<\/span>' AND '<\/span>:<\/span>''<\/span>;
<\/span>$sql <\/span>.= <\/span>$pre<\/span>.<\/span>$key<\/span>.<\/span>\" = '\"<\/span>.<\/span>$value<\/span>.<\/span>\"'\"<\/span>;
<\/span>$i<\/span>++;
}
}
if(<\/span>array_key_exists<\/span>(<\/span>