article

Thursday, July 5, 2018

Table Edit using jquery ajax php

Table Edit using jquery ajax php





?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table Edit using jquery ajax php mysqli</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<style>
body
{
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
}
.head
{
background-color:#333;
color:#FFFFFF
}
.edit_tr:hover
{
background:url(img/edit.png) right no-repeat #80C8E5;
cursor:pointer;
}
.editbox
{
display:none
}
.editbox
{
font-size:16px;
width:270px;
background-color:#ffffcc;
border:solid 1px #000;
padding:4px;
}
td
{
padding:10px;
}
th
{
font-weight:bold;
text-align:left;
padding:4px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
 $(".edit_tr").click(function() {
   var ID=$(this).attr('id');
   $("#first_"+ID).hide();
   $("#first_input_"+ID).show();
  }).change(function(){
   var ID=$(this).attr('id');
   var first=$("#first_input_"+ID).val();
   var dataString = 'id='+ ID +'&name='+first;
   $("#first_"+ID).html('<img src="img/loader.gif" />');
   if(first.length>0){
     $.ajax({
   type: "POST",
   url: "ajax.php",
   data: dataString,
   cache: false,
   success: function(html)
   {
    $("#first_"+ID).html(first);
   }
     });
   }else{
     alert('Enter something.');
   }
  });
   
  $(".editbox").mouseup(function() {
   return false
  });
   $(document).mouseup(function() {
   $(".editbox").hide();
   $(".text").show();
  });
});
</script>
</head>
<body>
<div style="margin:0 auto; width:350px; padding:10px; background-color:#fff;">
<table width="100%" border="0">
 <tr class="head">
 <th>PHP Frameworks</th>
 </tr>
<?php
$conn = new mysqli('localhost','root','','testingdb');
if ($conn->connect_error) {
    die('Error : ('. $conn->connect_errno .') '. $conn->connect_error);
}
 $i=1;
 $sql = $conn->query("SELECT * from topphpframework");
 while($row = $sql->fetch_assoc()) {
  $id=$row['id'];
  $name=$row['name'];
  if($i%2) {
?>
  <tr id="<?php echo $id; ?>" class="edit_tr">
  <?php } else { ?>
  <tr id="<?php echo $id; ?>" bgcolor="#f2f2f2" class="edit_tr">
  <?php } ?>
   <td width="50%" class="edit_td">
   <span id="first_<?php echo $id; ?>" class="text"><?php echo $name; ?></span>
   <input type="text" name="name" value="<?php echo $name; ?>" class="editbox" id="first_input_<?php echo $id; ?>" />
   </td>
  </tr>
 <?php
  $i++;
 } ?>
</table>
</div>
</body>
</html>
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
$conn = new mysqli('localhost','root','','testingdb');
if ($conn->connect_error) {
    die('Error : ('. $conn->connect_errno .') '. $conn->connect_error);
}
if($_POST['id'])
{
 $id=mysql_escape_String($_POST['id']);
 $name=mysql_escape_String($_POST['name']);
 $sql = "UPDATE topphpframework SET name = '$name' WHERE id = '$id' ";
 if ($conn->query($sql) === TRUE) {
  echo "Record updated successfully";
 } else {
  echo "Error updating record: " . $conn->error;
 }
}
?>

Posted by ednalan at 7:15 AM . Under , .

Related Post