Ajax table – Add Edit Delete Rows Dynamically Using jQuery PHP

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.

ajaxtable

Live Demo   Download

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.

107 thoughts on “Ajax table – Add Edit Delete Rows Dynamically Using jQuery PHP”

  1. 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!

  2. 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

  3. Pingback: Create Ajax Pagination with MySQL, PHP and jQuery - InfoTuts

  4. 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,

  5. 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

  6. 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,

  7. 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.?

  8. 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

  9. 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.

  10. 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,

  11. 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,

  12. 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,

  13. 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 !

  14. I want to replace textbox by select box from mysql. Please help me add select box in this code. Thank you very much.

  15. 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,

  16. 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

  17. 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.

  18. Hi,
    Thnaks for ttis fine script!

    I want no valdation eg, and empthy fields is not a problem

    Where to edit this ?

  19. Thanks for this tutorial, but the download is not working, it keep saying :

    Sorry, We dont have your email. Please Subscribe Below

  20. 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

  21. Hi,
    great tutorial, cant download it and i registered twice and waited untill today in hope the email list has updated. Please help

  22. 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

  23. 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.

  24. Hello,
    Many thanks for the tutorial but i can’t download the code even if i did subscribe, can you help me?
    Thanks.

  25. 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

  26. 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.

    1. Hi Justin,

      Apologies for updating the email list late, please get your file now.

      Thanks:
      Sanjeev

  27. 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,

  28. 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,

      1. 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,

      2. 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

  29. thanks for sharing, good code, and I can show the id of each data not edit this field. please answer. thanks

  30. 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

  31. from where i can download demo.php which is main file to be connected to database..
    plz help me

  32. 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

Comments are closed.