Delete row in table html using ajax and php

Question

How Delete row in table html using ajax and php, I need delete row in html table select row and click button delete make delete using ajax Currentally can make delete without ajax but I need delete row and stay on page without make submit on other page code javaScript

function getDelete()
{


$.ajax({
        type:"post",
        //dataType:"json",
        data:"id="+id,
        url:"delete_address.php?id=$id",   // url of php page where you are writing the query       
 success:function(json)
 { 


 },
error:function(){

        }
        });

}

code html and php

<?php
  $resualt=mssql_query("SELECT * FROM Address where user_id='$UserId' ") ;
  echo "<table border='1' class='imagetable' id='imagetable' 
  width='400px'    >\n";
  echo '<thead>'.'<tr>';
  echo '<th>Street</th>'.'<th>Quarter</th>'.
  '<th>From</th>'.'<th>To</th>'.'<th>Notes</th>';
  echo '</tr>'.'</thead>';
  echo '<tbody>';
  while ($row = mssql_fetch_assoc($resualt)) {
  $fromDate=$row['from_date'];
  $toDate=$row['to_date'];
  echo " <tr onClick='myPopup($row[id])'". 
  ( $_GET['id'] == $row['id'] ?   
  "style='background-color:  green;'":"").">\n"."<td >
  {$row['street']} </td>\n".
  "<td>{$row['quarter']}</td>\n"."<td>$fdate2</td>\n".
  "<td>$tdate2</td>\n"."<td>{$row['other_info']}</td>\n";
 }
 echo '</tbody>';
 echo "</table>\n";
?>
 <?php 
 echo"<a class='button-link' onClick='getDelete()'>delete</a>";
 ?>

code sql query

<?php
 $idEmploye=$_GET['id'];
 $userId=$_GET['user_id'];
 $db_host = 'MOHAMMAD-PC\SQL2005';
 $db_username = 'sa';
 $db_password = '123321';
 $db_name = 'db_test';
 mssql_connect($db_host, $db_username, $db_password);
 mssql_select_db($db_name); 
 mssql_query("DELETE FROM Address
 WHERE id='$idEmploye' ; ") or die(mssql_error()) ;
 echo '<script language="javascript">';
 echo 'alert("successfully deleted ")';
 echo '</script>';
 echo "<script>setTimeout(\"location.href ='address.php';\",10);     </script>"; 

 ?>

Any Help Very Thanks

Answer 1

Try this solution

HTML :

<table>
    <tr>
        <td>Username</td>
        <td>Email</td>
        <td>Action</td>
    </tr>
    <tr>
        <td>TheHalfheart</td>
        <td>TheHalfheart@gmail.com</td>
        <td>
            <input type="button" class="delete-btn" data-id="1" value="Delete"/>
        </td>
    </tr>
    <tr>
        <td>freetuts.net</td>
        <td>freetuts.net@gmail.com</td>
        <td>
            <input type="button" class="delete-btn" data-id="2" value="Delete"/>
        </td>
    </tr>
</table>

We have two button's properties call data-id and class delete-btn

AJAX jQuery :

    <script language="javascript">
    $(document).ready(function(){

        $('.delete-btn').click(function(){

            // Confirm
            if ( ! confirm('Are you sure want to delete this row?')){
                return false;
            }

            // id need to delete
            var id = $(this).attr('data-id');

            // Current button 
            var obj = this;

            // Delete by ajax request
            $.ajax({
                type : "post",
                dataType : "text",
                data : {
                    id : id
                },
                success : function(result){
                    result = $.trim(result);
                    if (result == 'OK'){
                        // Remove HTML row
                        $(obj).parent().parent().remove();
                    }
                    else{
                        alert('request fails');
                    }
                }
            });

        });

    });
</script>

In PHP :

• Get the ID and delete
• Reponse OK if success

Sorry i'm learning English, please fix if its bad