Add edit delete rows dynamically using jquery and php

Add edit delete rows dynamically using jquery and php
In my previous similar tutorial Ajax table adding removing rows dynamically using javascript animation i demonstrated how to add and delete records dynamically to the table using jquery which became one of the famous post and got many clicks and around 6000+ downloads, that sounds excellent response.I received many complains from user that they are facing errors, unfortunately i wasnt able to notice the problem for long time and then i came to know that there are few issues including php PDO library. Many of the users contacted me through email and comment asking for edit record feature, While adding that feature i though to make it more beautiful using some extra css and extra js code and here is updated code Edit delete add rows dynamically using jquery and php.

This new version is completely recoded from scratch and its customizable as well. I have added few customization option which you can customize as per your needs. You can change the input types as well, as a base i have tested this script with basic input elements like “text” and “textarea” you can add more elements like option, checkbox, dropdown etc, obviously you also have to make changes to the below javascript function code as there is code only for textbox and textarea.
As a first step you have to specify the details in javascript variables like column name, placeholder, and inputType and then specify html element type in js variable like below

var inputs = ':checked,:selected,:text,textarea,:file';

and as a second step you have to add details about the element to appear on page

createInput = function(i,str){
	str = typeof str !== 'undefined' ? str : "";
	if(inputType[i] == "text"){
		input = '';
	}else if(inputType[i] == "textarea"){
		input = ''; } return input; }

Below are the customization options available, Read before you integrate it in your application.

Option Description Possible Values
table Table class name which will be referred all over the script, You MUST specify correct class name to make this script work.
columns Column names exactly as it is specified in mysql database column as javascript array new Array(“fname”,…,”address”);
placeholder Placeholder text for each control new Array(“Enter First Name”,…,”Enter Email”,”Enter Address”);
inputType Column names exactly as it is specified in mysql database column as javascript array new Array(“fname”,…,”address”);
savebutton
deletebutton
editbutton
updatebutton
cancelbutton
This variables hold class names which specifies which element holds what function. You dont have to make changes to js code, just change the class name and that button/element will change its behaviour.
saveImage
editImage
deleteImage
cancelImage
updateImage
This variables hold full image paths for buttons/actions.
saveAnimationDelay This option holds intereger value in miliseconds which denotes animation delay for adding new record.
deleteAnimationDelay This option holds intereger value in miliseconds which denotes animation delay for deleting new record.
effect This option specifies animation for row which will get added or deleted. 1) slide 2) flash

Download Add edit delete rows dynamically using jquery and php

To download the code, Tweet, Like or Share below.


Add edit delete rows dynamically using jquery (735)
Add edit delete rows dynamically drop down (57)

About Amit

   Myself Amit Patil from Maharashtra (India). I have been working as a Web Application Developer from last 5+ years, and its my passion to learn new things and implement them as a practice. Basically i am a PHP developer but now a days exploring more in CSS and javascript.

Comments

  1. getRecords(); ?> $eachRecord){ ?>
    This error is found..
    i had download the script & run on my server with Database name “ajax_table” and table “info”.

    • What is the error text?

      • In each column this error occurs…
        Notice: Undefined variable: i in F:\xampp\htdocs\Add-edit-delete-rows-dynamically-using-jquery\index.php on line 92

        Notice: Undefined variable: eachRecord in F:\xampp\htdocs\Add-edit-delete-rows-dynamically-using-jquery\index.php on line 93

        Notice: Undefined variable: eachRecord in F:\xampp\htdocs\Add-edit-delete-rows-dynamically-using-jquery\index.php on line 94

        Notice: Undefined variable: eachRecord in F:\xampp\htdocs\Add-edit-delete-rows-dynamically-using-jquery\index.php on line 95

        Notice: Undefined variable: eachRecord in F:\xampp\htdocs\Add-edit-delete-rows-dynamically-using-jquery\index.php on line 96

        Notice: Undefined variable: eachRecord in F:\xampp\htdocs\Add-edit-delete-rows-dynamically-using-jquery\index.php on line 97

        • Sara, I think you havent made changes to config.php file thats why you are getting error, For the time being disable notice errors in php.ini. This is not a good practice but its a quick work around.

    • Sara, try replacing all “<?" with "<?php" – this worked for me.
      ( Problem is that you don't have this short_tag enabled in php.ini on your server)

  2. need help with forms and grids and multiple ajax tabs and login and registration system

  3. Hello Amit! Thank you great solution! Is that possible to have examples about radio with three choices, checkbox and dropdown input types. I would be very grateful about that.

  4. How would this work if my input types were select drop down lists?

  5. Hi,
    I just downloaded the code and run it, It working fine.can u please tell me how to add drop down select box to the code.
    thank you!

  6. Wonderful script. I am having a couple of small issues, mainly because I am not as proficient in javascript as i would like to be.
    In the index file, I am able to set the width and height of the edit and delete images. After I add a new record, the images for the edit and cancel are set in the script.js file. I believe the code is:
    html += ‘ ‘;

    I need to set the image width and height. Can someone tell me how to do this here.

    The 2nd issue is that I have a way to resize the entire table so that the columns stack when going from a desktop to mobile. I am using a div for this. Looks great and works except that the input area for a new record. So, what I think I need to do is add a div to this line(around line 65)
    $(“.”+table).append(blankrow);
    Can someone help me with adding the div to this line. the div in the php file is:

    Other than that, thanks for the script. works great.

    Grant

    • Sorry, looks like the code didn’t come through.
      I think where I need to add the div is line 110.
      html += “”+$(“.”+table+” tr[id="+id+"] td:first-child”).html()+””;
      Thanks,

  7. Anand Choudhary says:

    Hello Amit I need code for Add edit delete rows dynamically using jquery and php with radio buttom
    like
    Male
    Female

  8. Bhupander Kumar says:

    how to find the code above post and also add the value in database using Ajax

    Thanks

    Bhupander Kumar

    • There is social locker plugin, you click on like, share, google plus button and it will show you download button.

  9. hi, thankyou for your code. i’ve downloaded and apply to my project but there’s a problem.
    Ex= “JL TIMOR” when i try to edit the data by click inline row, it just show “JL” except we make “JL.TIMOR” it will show “JL TIMOR” . It cannot show the text after space. Do you have any sollution? Thankyou

  10. Dear Mr.Amit,

    Is that possible if i use this code for many tables? because i’ve tried it and found some troubles. For ex: i can’t edit and delete the data in a row. It will be helpfull if you give me some suggestions. Thanks.

  11. Hi Guys,
    I’ve receiving this error an I’m unable to overcome this. Considering that I’m a newbie!

    Warning: require_once(E:\wamp\www\ajax_table\config.php): failed to open stream: No such file or directory in E:\wamp\www\test\ajax_table.class.php on line 34

    #

    Time

    Memory

    Function

    Location

    1 0.0000 248528 {main}( ) ..\index.php:0
    2 0.0000 276320 require_once( ‘E:\wamp\www\test\ajax_table.class.php’ ) ..\index.php:34

    Fatal error: require_once(): Failed opening required ‘E:\wamp\www\ajax_table\config.php’ (include_path=’.;C:\wamp\php4\PEAR’) in E:\wamp\www\test\ajax_table.class.php on line 34

    #

    Time

    Memory

    Function

    Location

    1 0.0000 248528 {main}( ) ..\index.php:0
    2 0.0000 276320 require_once( ‘E:\wamp\www\test\ajax_table.class.php’ ) ..\index.php:34

    • @Nedal : I see there is discrepancy in paths “E:\wamp\www\ajax_table\config.php” and “E:\wamp\www\test\ajax_table.class.php”, There is a “test” folder in second url. Thats why its throwing error. You must have forgot to place it in right directory.

      • Hi Amit,
        I downloaded the .zip file to the wamp WWW directory, and then extracted it to a test folder.

        I’m accessing it as http://localhost/test/

        I’m not sure why its not recognizing this folder. Shall I put it on the base folder ONLY i.e. WWW

        Thank you for your prompt replies…appreciated!
        Regards,

        • I can see that in the ajax_table.class you’ve made the following:

          require_once(dirname(dirname(__FILE__)) . ‘\ajax_table\config.php’);

          there is no such folder called ajax_table in the directory that has been created by the extract. This was the problem :-)

          • Hold on, i just found out that, Users are downloading old script which throwing this error, because i just moved blog to new server then back to old and then again to the new one, and this reverted download path to old script, Probably you also have downloaded old one. Thatnks for pointing it out, I will update the code on blog and will send you a copy to your email. Cheers !!

  12. Ramesha Jogi says:

    Can you please use checkbox one column for insert, update, delete and select values. please upload that example given mail id.

  13. betterdayz says:

    I got it connected to my database, I changed all the tables named “info” to my new table name, I get output from the table in the script, but cant save, edit or delete any item, I always get “Unexpected Error occured, please try again” message

    • betterdayz says:

      Nevermind.. I was connecting to the DB with another connect script. works great so far!

    • Hi,

      Got also the message:
      Unexpected Error occured, please try again

      an idea ?

      waths this file for? url: “ajax.php”, in script rule 198

      Thanks for comment

  14. Kweku Agyei says:

    Good work. I want to use show name in the drop down menu. The values ‘aid’ and ‘a’ will be pulled from database and is dynamic. how do I add this to the selectopt. Thank you.

  15. Jair Almeida says:

    i have a problem with two select controls and in oracle -> mysql_real_escape_string ?

    • If you want to use this script with oracle, you better replace plain mysql function with PDO class functions. Unluckily there is no direct replacement function for mysql_real_escape_string in oracle, You have to use PDO::quote.

  16. Thank you for this very complete and well working example.
    I just added a HTML5 “direct” editing alternative to get around mobile (i-phone / Safari) double click / double tap challenges this way:
    Frontend (index.php):
    And in script.js :

    // init variables
    ..
    var flagedit = 0;

    $(document).on(“dblclick”,”.”+table+” td”,function(e){
    flagedit = 1; //to suspend re-applying by HTML5 contentEditable

    $(document).on(“blur”,”.”+table+” td”,function(e){
    if(tdediting == 1){
    var newval = $(“.”+table+” tr[id='"+editingtrid+"'] td[class='"+editingtdcol+"']“).find(inputs).val();
    ajax(editingtdcol+”=”+newval+”&rid=”+editingtrid,”updatetd”);
    } else if(this.contentEditable == “true”){ //allow HTML5 direct editing
    if (flagedit != 1){
    editingtrid = $(this).closest(‘tr’).attr(“id”);
    editingtdcol = $(this).attr(“class”);
    var newval = $(this).text();
    ajax(editingtdcol+”=”+newval+”&rid=”+editingtrid,”updatetd”);
    }
    }
    });

    • Thanks for this nice addition. Much appreciated.

      • Amit, notes after some testing last night.
        I used online src jquery.min and jquery- ui from ajax.googleapis.com – it works

        1) In index.php, I forgot to mention you need to add contenteditable=”true” to td’s tags you want them HTML5 editable

        2) I tested on several browsers, works fine. However IE don’t allow contenteditable for td.
        There is a workaround but is not worth (by inserting div to td), since your code supports IE nice by input fields.

        3) In my “addition” in script.js to on(“blur” part, you should clear the flagedit at the end. See the fix.
        Otherwise, after an input editing, the contenteditable enabling will need one extra refresh.


        ajax(editingtdcol+”=”+newval+”&rid=”+editingtrid,”updatetd”);
        }
        }
        flagedit = 0; // re-enable
        });
        });

        Thank again, great code!
        :)

        • Lorol, Many thanks for experimenting with it and testing it will multiple browsers,While making this script i was planning to use contenteditable attribute but unfortunately it doesnt work with elements like dropdown, checkbox, radio. I wanted this script to be more useful so i choose to make editable TD myself with some programming. I havent tried adding checkboxes and radio but i did try adding dropdown, and with few changes i was able to add dropdown to the script, I moved my blog to new server and i lost some changes so that demo is not there, I will add it today only. I am planning to launch its next version with simple and customizable code but unfortunately i dont get enough time to sit and work on it :(

  17. Hi Amit, thanks for the script, it is wonderful.I have a question regarding the input fields generated by js: I have added a field where the user has to post a “date”, which is a text field, so I made a separate script that by selecting the text field (focus), a calendar appears on the screen in order to select the date which is shown in textfield. Is it possible to implement this into your script? Tanks in advance.

  18. Thanks

    But where can i download, or take the course from the demo?

  19. Thanks for a wonderful script!
    (but…)
    I’m pretty noob and I have been fighting this problem for days now: I use the dropdown version and got everything working, I thought, until I discovered that the dropdown fails right after you click save. “Luckily” your demo page has the same error. If you select the same address again from the dropdown, it won’t succeed. The options value gets deleted… If you refresh the page, it works. I really hope this gets fixed?

    • Frank, I just tested it my side, and i am not able to recreate the error you are talking about, can you please share the details of OS and browser, version you are using ? I tested it with FF and its working fine.

      • Hm, maybe I was not clear enough. I fill the fields with random stuff, typically asdf. Dropdown has Pune preselected. I click save. Blank row is added, but Address dropdown is missing or showing Pune. I fill in random text again, select Pune, click save. Pune gets error-highlighted. I can choose Karad or something else and it’s ok. If I choose either of them on line three they will get error hightlighted. If I refresh the page all is ok, so the initialization of the table is working fine. But something is not updating correctly when I click save.
        This is copied from Chrome (inspect element):
        Pune

        I’ve tried on the following browsers:
        OS X 10.10 and 10.9:
        Chrome 38.0.2125.111
        Safari 8.0 (10600.1.25)
        and the latest Firefox.

        Windows 7/8:
        Chrome, Firefox and IE 11

        • Frank, I believe this is OS related issue, I tested the demo in FF, chrome and safari 5. I still cannot reproduce it. I added new record, then edited single td and choose same value, then edited complete row as well. Unfortunately i dont have MAC computer so cannot test and check.

  20. It cannot be OS related. Really, I have tried every browser on both Mac AND PC. Haven’t tried Linux though :P
    Please take a minute (literally) to watch this I just made. It’s from my Chrome browser, but it’s the same on every browser on all OSes: http://youtu.be/QcbpvO_HiR0

    There is something going on in the option-tag. Value disappears after save…
    Please help! ;) Thanks.

    • Frank, Now i got what you mean, I was doing it wrong :P. I was editing the same row and was selecting same value from dropdown. I am looking in to it. Will get back to you soon.

    • Frank, i got the problem, open script.js and find ‘this.value = “”;’ and replace it with below code
      if(this.tagName == "INPUT") this.value = "";

      • Awesome work! I have a couple of textareas as well, so I changed to the following, and now all looks good:

        $(document).find("."+table).find(inputs).filter(function() {
        if((this.tagName == "INPUT") || (this.tagName == "TEXTAREA")) {
        this.value = "";
        }
        $(this).removeClass("success error");
        });

        Thank you!

  21. Hi,

    When i click the edit icon, the select with address becomes in the filed where the edit icon is.

    I try and check 100 times can find…..

    an idea ?
    The orginal script works fine!

    .

    • Can you please explain again what do you mean ?

      • Hi

        Make a new record telefoonnummer:
        var columns = new Array(“fname”,”lname”,”tech”,”email”,”address”,”telefoonnummer”);
        var placeholder = new Array(“Enter First Name”,”Enter Last Name”,”Enter Technology”,”Enter Email”,”Enter Telefoonnummer”,””);
        var inputType = new Array(“text”,”text”,”text”,”text”,”text”,”select”);
        var table = “tableDemo”;
        var selectOpt = new Array(“Pune”,”Karad”,”Kolhapur”,”Satara”,”Sangli”);;

        Table
        Telefoonnummer

        and make a record in the table off the database telefoonnummer

        When i click in the field telefoonnummer at the webpage and fill in a number its seems Ok , but when refresh the page ,it not save and is empthy again.

        • // Column names must be identical to the actual column names in the database, if you dont want to reveal the column names, you can map them with the different names at the server side.
          var columns = new Array(“fname”,”lname”,”tech”,”email”,”address”,”telefoonnummer”);
          var placeholder = new Array(“Enter First Name”,”Enter Last Name”,”Enter Technology”,”Enter Email”,”Enter Telefoonnummer”,””);
          var inputType = new Array(“text”,”text”,”text”,”text”,”text”,”select”);
          var table = “tableDemo”;
          var selectOpt = new Array(“Pune”,”Karad”,”Kolhapur”,”Satara”,”Sangli”);;

          // Set button class names
          var savebutton = “ajaxSave”;
          var deletebutton = “ajaxDelete”;
          var editbutton = “ajaxEdit”;
          var updatebutton = “ajaxUpdate”;
          var cancelbutton = “cancel”;

          var saveImage = “images/save.png”
          var editImage = “images/edit.png”
          var deleteImage = “images/remove.png”
          var cancelImage = “images/back.png”
          var updateImage = “images/save.png”

          // Set highlight animation delay (higher the value longer will be the animation)
          var saveAnimationDelay = 3000;
          var deleteAnimationDelay = 1000;

          // 2 effects available available 1) slide 2) flash
          var effect = “flash”;

          Sr
          First Name
          Last Name
          Technology
          Email

          Address
          Action

          $eachRecord){
          ?>
          <tr id="”>

          <a href="javascript:;" id="” class=”ajaxEdit”>
          <a href="javascript:;" id="” class=”ajaxDelete”>

  22. and make in the html tabel:
    Telefoonnummer

Trackbacks

  1. […] Please visit and download updated code with edit functionality and many other customization options http://www.amitpatil.me/add-edit-delete-rows-dynamically-using-jquery-php […]

Speak Your Mind

*


*

Notify me of followup comments via e-mail. You can also subscribe without commenting.

More in Ajax, CSS, Misc, PHP (1 of 45 articles)


[caption id="attachment_1687" align="alignleft" width="570"] PHP Poll Script[/caption]     Are you looking for the simple and fancy PHP poll script ? ...