Hi guys I have previously written a tutorial on inline row editing in an HTML table. It helped a lot of people so I thought why not to write a complete tutorial on adding, removing and editing rows in an HTML table via Ajax. It’s really user friendly because user doesn’t need to refresh the page to perform CRUD operations in the table. User can dynamically add a new row, delete an existing row or edit any row on the fly. This works well in all major browsers including IE, so you can just use this code in your web projects. We have created this script in a way so that you can easily edit it as per your requirements. The code is easy to understand and work with.
[button_round color=”blue” url=”infotuts.com/demo/edit-add-delete-rows-ajax-table-jquery/”] Live Demo [/button_round] [button_round color=”blue” url=”infotuts.com/demo/edit-add-delete-rows-ajax-table-jquery/download.html”] Download [/button_round]
We have used mysqli for database connectivity to ensure security. Its better to use this script rather than buying any premium script for adding deleting and editing rows/record in a table. Lets see how you can use this script. We have index.php which only contains a <div> for table.
Code for Index.php:
</p> <body> <div id="mhead"><h2>Ajax table - Edit Add Delete rows with Ajax PHP - InfoTuts</h2></div> <div id="note"> <span> Demo is not connected to Database, please download the file and try in your local server </span></div> <table id='demoajax' cellspacing="0"> </table> <script type="text/javascript" src="script.js"></script> </body> <p style="text-align: justify;">
We have script.js file which calls dbManipulate.php file via ajax to perform all the CRUD operation in our HTML table. dbManipluate.php file contains functions to perform task of displaying data from DB, insert data into DB, delete data from DB and update any record in DB.
Lets see our code for dbManipulate.php file:
</p>
<?php
include('db.php');
if(isset($_REQUEST['actionfunction']) && $_REQUEST['actionfunction']!=''){
$actionfunction = $_REQUEST['actionfunction'];
call_user_func($actionfunction,$_REQUEST,$con);
}
function saveData($data,$con){
$fname = $con->real_escape_string($data['fname']);
$lname = $con->real_escape_string($data['lname']);
$domain = $con->real_escape_string($data['domain']);
$email = $con->real_escape_string($data['email']);
$sql = "insert into ajaxtable(firstname,lastname,domain,email) values('$fname','$lname','$domain','$email')";
if($con->query($sql)){
showData($data,$con);
}
else{
echo "error";
}
}
function showData($data,$con){
$sql = "select * from ajaxtable order by id asc";
$data = $con->query($sql);
$str='<tr class="head"><td>Firstname</td><td>Lastname</td><td>Domain</td><td>Email</td><td></td></tr>';
if($data->num_rows>0){
while( $row = $data->fetch_array(MYSQLI_ASSOC)){
$str.="<tr id='".$row['id']."'><td>".$row['firstname']."</td><td>".$row['lastname']."</td><td>".$row['domain']."</td><td>".$row['email']."</td><td><input type='button' class='ajaxedit' value='Edit'/> <input type='button' class='ajaxdelete' value='Delete'></td></tr>";
}
}else{
$str .= "<td colspan='5'>No Data Available</td>";
}
echo $str;
}
function updateData($data,$con){
$fname = $con->real_escape_string($data['fname']);
$lname = $con->real_escape_string($data['lname']);
$domain = $con->real_escape_string($data['domain']);
$email = $con->real_escape_string($data['email']);
$editid = $con->real_escape_string($data['editid']);
$sql = "update ajaxtable set firstname='$fname',lastname='$lname',domain='$domain',email='$email' where id=$editid";
if($con->query($sql)){
showData($data,$con);
}
else{
echo "error";
}
}
function deleteData($data,$con){
$delid = $con->real_escape_string($data['deleteid']);
$sql = "delete from ajaxtable where id=$delid";
if($con->query($sql)){
showData($data,$con);
}
else{
echo "error";
}
}
?>
<p style="text-align: justify;">
Our another main file is script.js which uses jQuery Ajax to call dbManipulate.php and passes it desired parameters and variables based on user action in front end. It also created a new input field when user saves a record. You can download the code and get it working in your local setup.
Any suggestions from you guys is welcome in order to improve this script or any other tutorial that you want to see here. Please share this simple script/tutorial with your friends and followers.
Comments
107 responses to “Ajax table – Add Edit Delete Rows Dynamically Using jQuery PHP”
Hi!
That’s great!
But will be much better if the script can dinamicly manipulate the table.
For example that I can just say’s the table name and it “load” the field names so I don’t have to modify the script for any table I need to.
Thanks!
Nice article… thanks for sharing.
It would be nice, if you could share a post on ajax-table-add-edit-delete-rows-dynamically-jquery-php-without-buttons. Hope you are getting what I mean to say. On tab, things should get updated. I saw similar post somewhere, will share you the link in a while.
Thanks
Subscribed but cannot download files.
me too.
[…] and offer an awesome interface to switch between the pages easily. We have already written about delete, update, add rows in a table using PHP, jQuery, MySQL and Ajax, you can use this tutorial to integrate pagination system in our previous […]
Awesum..but the table displayed overlap the screen, how can i resize the table?
pls i am not able to download this script whenever i enter my emailid it show no email found
Done. Please download the file.
pls i am not able to download
Hi,
Please download the code now.
I have tried to download the file but it says I must subscribe. I did subscribe but the system is not recognizing my email.
Can you help?
Thanks,
Please download now 🙂
Great article Sanjeev, thank you!
I have successfully implemented this into a project I’m working on, but can’t seem to resolve a bug. When you click ‘edit’ on multiple rows, then click cancel on both, it adds duplicate createInput fields and makes a row disappear.
Any thoughts on how I can fix this?
Thanks
Hi Matt,
We have changed the JS script a little bit. Now you can only edit one row at a once. You need to close or update any other row before you edit a new one. Download the scrip from here https://app.box.com/s/aq6l3s8qj4v6irxfqeh5.
Thanks:
Sanjeev
I did subscribe but the system is not recognizing my email. Plz help.
Hi dude, really this article was very helpful for me.. Many many thanks bro..
I have tried to download the file but it says I must subscribe. I did subscribe but the system is not recognizing my email.
Can you help?
Thanks,
I can’t download even though I had subscribed it. Help!
how can i get rid of the placeholders? i already edited the script.js but its still there pls respond asap
Remove [placeholder=’”+field_pre_text[i]+”‘] from
“”
in script.js …..
its good but one thing i’m asking you can it is possible that when we save the data than never come to again for new data submittion only show edit button.?
oh god, the same problem. can not download the file even have subsribe
Please download your file now
Please accept my subscription too. Because me too wants to download.
good as I can download the code, that serves no discharge system
Hi,
I have subscribed to download the code .But am unable to download .It says “Sorry, We dont have your email. Please Subscribe Below” for which I have already subscribed
I can’t download. Thanks in advance..
Please download your file now
I did subscribed but still i couldn’t download the file.
Subscribed but I can’t download… Thanks for reply.
under table column a create a textbox and value how to get…
Hello
I am unable to upload file(Image) using this code.Please add the input type=”file” field in this code.
All others are very fantastic. Thanx
I hope i will get reply soon.
I have tried to download the file but it says I must subscribe. I did subscribe but the system is not recognizing my email.
Can you help?
Thanks,
Hi, I subscribe but I cant download the file, plz help.
I already subcribe but I still cannot download the file. please help
I have tried to download the file but it is saying that I must subscribe. I did subscribe but the system is not recognizing my email.
Please help. Waiting for a response
Thanks,
I cant download the file, this is a great source, thanks for the post.
Subscribed, but can’t download the file… please help 🙂
Thanks for the article!
I have tried to download the file but it says I must subscribe. I did subscribe but the system is not recognizing my email.
Can you help?
Thanks,
I have tried to download the file but it says I must subscribe. I did subscribe but the system is not recognizing my email.
Pls help !
I want to replace textbox by select box from mysql. Please help me add select box in this code. Thank you very much.
Please accept my subscription too. Because me too wants to download.
Please download the file now.
Thanks
i cant download the file. Please let me download it
I have tried to download the file but it says I must subscribe. I did subscribe but the system is not recognizing my email.
Can you help?
Thanks,
i have subscribed, and email confirmed, but still unable to download. pls let me download.
I have subscribed my email id but but the system is not recognizing my email. Plz help.
Hi,
Email list has been updated. Please get the code now.
Thanks:
Sanjeev
This is great. I am trying to figure out how to insert a session variable into the database but just can’t get it to work. I’ve been trying this in the DBmanipulate.php file but it does not work. Can anyone help me?
$sql = “insert into mydb (field,username) values(‘$variable’, ” . $_SESSION[‘username’] . “)”;
Many thanks,
Julian
i subscribed but i can’t download please help me!
thanx, got the code 🙂
This example is very useful to us but the downloading can take more time and we cannot visible the code.
so please kindly show the entire code of this grid example.
I have subscribed my email id but but the system is not recognizing my email. Plz help.
I have subscribed but can’t download the code
Hi,
Thnaks for ttis fine script!
I want no valdation eg, and empthy fields is not a problem
Where to edit this ?
Thanks for this tutorial, but the download is not working, it keep saying :
Sorry, We dont have your email. Please Subscribe Below
Same problem cant download…
Hi Guys,
Email list was updated. Please get your file now.
have subscribed twice now, but still i cant download
I have Subscribe But Cannot Download Code.give Error Message Sorry, We dont have your email. Please Subscribe Below Please Help Me This Code Is Very Important For Me Advance Lot’s Of Thank
Hi Bharat,
Have you got the code? You can download it now.
Thanks:
Sanjeev
Hi,
great tutorial, cant download it and i registered twice and waited untill today in hope the email list has updated. Please help
Hi,
Please download your file
Hi sanjeev shrivastava,
First of all, i must say this is a really great script.
I still can’t download the files,
i’ve registered since yesterday.
Plase help,
Thanks
Thank you for fixing the download link, it’s working now.
I have another question, how about if the table become big ? is there any way to add a pagination to the table ?
thanks.
Hello,
Many thanks for the tutorial but i can’t download the code even if i did subscribe, can you help me?
Thanks.
Hi Sanjeev, thanks for the tutorial.
Can you help me, if I want to pass a parameter to the showData function in DbManipulate.php?
Let’s say I have a category in the table so that the sql query will be: “select * from ajaxtable where category = $cat order by id asc”. And I get the $cat from the value of a Dropdown select.
Thanks
Same problem cant download…
Hi,
You should be able to download the file now 🙂
the subscribe & download continues to not work. one must assume the insert is done immediately and yet the select says no email adr like yours can be found.
Hi Justin,
Apologies for updating the email list late, please get your file now.
Thanks:
Sanjeev
I have Subscribe But Cannot Download , pls help
Please download your file now.
Thanks:
Sanjeev
I have also Subscribe But Cannot Download , pls help 🙂
Email list has been updated. Please download your file.
Thanks:
Sanjeev
what will be th code of db.php
I Cant Download code after registration plz help me
Hi,
Please download your file now.
Thanks:
Sanjeev
Thanks
I Cant Download code even I subscribed yesterday. I require this code to study. Plz help me.
You should be able to download the code.
your code is very good but i am able to use my side.
how can i upgrade this type of code.??
Please accept my subscription Request. Its Very Urgent.
i am not able to download this script whenever i enter my emailid it show no email found
Please download it now.
would it be possible to add a checkbox. for example (male or female)
I also have subscribed and left it for 12 hrs and still cannot download ??? Help
Hi.
Please get your file now 🙂
Cool!!
I have tried to download the file but it says I must subscribe. I did subscribe but the system is not recognizing my email.
Can you help?
Thanks,
You can download your file now.
I have tried to download the file but it says I must subscribe. I did subscribe but the system is not recognizing my email. it’s been hours since i subscribe.
Can you help?
Thanks,
You can download the code now 🙂
I have tried to download the file but it says I must subscribe. I did subscribe but the system is not recognizing my email. it’s been hours since i subscribe.
Can you help?
Thanks,
I have tried to download the file but it says I must subscribe. I did subscribe but the system is not recognizing my email. help asap
Please download the file now
thanks for sharing, good code, and I can show the id of each data not edit this field. please answer. thanks
Just subscribed but no download?
Please download now
Please can this script work with dropdown?
whats going on InfoTuts..
I have subscribed on ur InfoTuts website.
I have confirmation mail. I have already clicked on confirmation link before 4 days.
then why u dont help me. plz give the download link as early as possible
thank you sir. I got link. And i have downloaded it.
from where i can download demo.php which is main file to be connected to database..
plz help me
Hi 🙂 Can you please allow me to download the file? Already registered yesterday. Thank you for your work.
Received. Thank you.
hi thanks for your tutorial,i modified your code and insert a field called dob,i enter the data manually but like to know how to open up the datepicker when i clicked on field,in all cases like insert,edit but i want to open up datepicker popup and when i clicked on it,so it will open up and save that value in database also,hope you rep soon,your tutorial is really helpfull but i m really so confused with these jquery ,pls reply soon
hey do you have that code please send it to my id. i need it for project. i have problem in update.
i have done select, insert delete. please send it to pradeepkmr1701@gmail.com