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


Add edit delete rows dynamically using jquery (212)

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

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