Add Edit And Delete Records Using jQuery Ajax PHP And MySQL

Add Edit And Delete Records Using jQuery Ajax PHP And MySQL

In this Post We Will Explain About is Add Edit And Delete Records Using jQuery Ajax PHP And MySQL With Example and Demo.Welcome on Live24u.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to live table add edit delete using ajax jquery in php mysqlExample

In this post we will show you Best way to implement add edit delete rows dynamically using jquery and php, hear for insert update delete in php with examplewith Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

You can download source code and Demo from below link.




Step 1.create a PHP file to display your database records

// simple Database Structure 
CREATE TABLE `stock_move` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `item_name` text NOT NULL,
 `memo` int(11) NOT NULL,
 PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=5 DEFAULT CHARSET=latin1

index.html

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="do_change_records.js"></script>
</head>
<body>
<div id="wrapper">

<?php
$server_host="localhost";
$server_username="root";
$your_pass="";
$databasename="live24u";
$connect=mysql_connect($server_host,$server_username,$your_pass);
$db=mysql_select_db($databasename);

$select =mysql_query("SELECT * FROM stock_move");
?>

<table align="center" cellpadding="10" border="1" id="user_table">
<tr>
<th>NAME</th>
<th>AGE</th>
<th></th>
</tr>
<?php
while ($custom_row=mysql_fetch_array($select)) 
{
 ?>
 <tr id="custom_row<?php echo $custom_row['id'];?>">
  <td id="item_value<?php echo $custom_row['id'];?>"><?php echo $custom_row['item_name'];?></td>
  <td id="memo_value<?php echo $custom_row['id'];?>"><?php echo $custom_row['memo'];?></td>
  <td>
   <input type='button' class="edit_button" id="edit_button<?php echo $custom_row['id'];?>" value="edit" onclick="edit_row('<?php echo $custom_row['id'];?>');">
   <input type='button' class="save_button" id="save_button<?php echo $custom_row['id'];?>" value="save" onclick="save_row('<?php echo $custom_row['id'];?>');">
   <input type='button' class="delete_button" id="delete_button<?php echo $custom_row['id'];?>" value="delete" onclick="remove_row('<?php echo $custom_row['id'];?>');">
  </td>
 </tr>
 <?php
}
?>

<tr id="new_row">
 <td><input type="text" id="new_item"></td>
 <td><input type="text" id="new_memo"></td>
 <td><input type="button" value="Add Row" onclick="add_row();"></td>
</tr>
</table>

</div>
</body>
</html>




Step 2.Make a js simple file and here define scripting

function edit_row(id)
{
 var item_name=document.getElementById("item_value"+id).innerHTML;
 var memo=document.getElementById("memo_value"+id).innerHTML;

 document.getElementById("item_value"+id).innerHTML="<input type='text' id='item_text"+id+"' value='"+item_name+"'>";
 document.getElementById("memo_value"+id).innerHTML="<input type='text' id='memo_text"+id+"' value='"+memo+"'>";
	
 document.getElementById("edit_button"+id).style.display="none";
 document.getElementById("save_button"+id).style.display="block";
}

function save_row(id)
{
 var item_name=document.getElementById("item_text"+id).value;
 var memo=document.getElementById("memo_text"+id).value;
	
 $.ajax
 ({
  type:'post',
  url:'do_change_records.php',
  data:{
   edit_row:'edit_row',
   prow_id:id,
   item_value:item_name,
   memo_value:memo
  },
  success:function(results) {
   if(results=="success")
   {
    document.getElementById("item_value"+id).innerHTML=item_name;
    document.getElementById("memo_value"+id).innerHTML=memo;
    document.getElementById("edit_button"+id).style.display="block";
    document.getElementById("save_button"+id).style.display="none";
   }
  }
 });
}

function remove_row(id)
{
 $.ajax
 ({
  type:'post',
  url:'do_change_records.php',
  data:{
   remove_row:'remove_row',
   prow_id:id,
  },
  success:function(results) {
   if(results=="success")
   {
    var custom_row=document.getElementById("custom_row"+id);
    custom_row.parentNode.removeChild(custom_row);
   }
  }
 });
}

function add_row()
{
 var item_name=document.getElementById("new_item").value;
 var memo=document.getElementById("new_memo").value;

 $.ajax
 ({
  type:'post',
  url:'do_change_records.php',
  data:{
   add_row:'add_row',
   item_value:item_name,
   memo_value:memo
  },
  success:function(results) {
   if(results!="")
   {
    var id=results;
    var table=document.getElementById("user_table");
    var table_len=(table.rows.length)-1;
    var custom_row = table.insertRow(table_len).outerHTML="<tr id='custom_row"+id+"'><td id='item_value"+id+"'>"+item_name+"</td><td id='memo_value"+id+"'>"+memo+"</td><td><input type='button' class='edit_button' id='edit_button"+id+"' value='edit' onclick='edit_row("+id+");'/><input type='button' class='save_button' id='save_button"+id+"' value='save' onclick='save_row("+id+");'/><input type='button' class='delete_button' id='delete_button"+id+"' value='delete' onclick='remove_row("+id+");'/></td></tr>";

    document.getElementById("new_item").value="";
    document.getElementById("new_memo").value="";
   }
  }
 });
}

Step 3.create a PHP file for and simple mysql database operations

<?php
$server_host="localhost";
$server_username="root";
$your_pass="";
$databasename="live24u";

$connect=mysql_connect($server_host,$server_username,$your_pass);
$db=mysql_select_db($databasename);

if(isset($_POST['edit_row']))
{
 $custom_row=$_POST['prow_id'];
 $item_name=$_POST['item_value'];
 $memo=$_POST['memo_value'];

 mysql_query("update stock_move set item_name='$item_name',memo='$memo' where id='$custom_row'");
 echo "success";
 exit();
}

if(isset($_POST['remove_row']))
{
 $row_no=$_POST['prow_id'];
 mysql_query("delete from stock_move where id='$row_no'");
 echo "success";
 exit();
}

if(isset($_POST['add_row']))
{
 $item_name=$_POST['item_value'];
 $memo=$_POST['memo_value'];
 mysql_query("insert into stock_move values('','$item_name','$memo')");
 echo mysql_insert_id();
 exit();
}
?>

You can download source code and Demo from below link.




Example

I hope you have Got What is add edit and delete record using php/mysql And how it works.I would Like to have FeadBack From My Blog(live24u.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(live24u.com) Are Most Always Welcome.

http://live24u.com/wp-content/uploads/2017/06/Add-Edit-And-Delete-Records-Using-jQuery-Ajax-PHP-And-MySQL-1024x576.jpghttp://live24u.com/wp-content/uploads/2017/06/Add-Edit-And-Delete-Records-Using-jQuery-Ajax-PHP-And-MySQL-150x150.jpgadminAjaxCSSHtmlJavaScriptjQueryJSONMysqlMysqliPHPadd edit and delete record using php/mysql,Add edit delete rows dynamically using jquery and php,ajax add edit delete records in database using php,inline editing in php with ajax,insert update delete in php with example,jquery add edit delete table row,live table add edit delete using ajax jquery in php mysql,live table edit with jquery and ajax phpAdd Edit And Delete Records Using jQuery Ajax PHP And MySQL In this Post We Will Explain About is Add Edit And Delete Records Using jQuery Ajax PHP And MySQL With Example and Demo.Welcome on Live24u.com - Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends...BIGGEST AND FASTEST Web Tutorials - live24u.com

No Comments Yet

Leave a Reply

Your email address will not be published.