Edit table bằng Jquery và Ajax

Bài viết sau sẽ hướng dẫn các bạn thực hiện edit trực tiếp trên table bằng jQuery và Ajax.

I.Database
Vẫn là thằng database này.

CREATE TABLE fullnames
(
    id INT PRIMARY KEY AUTO_INCREMENT,
    firstname VARCHAR(70), 
    lastname VARCHAR(70)
);

CREATE TABLE fullnames

(

id INT PRIMARY KEY AUTO_INCREMENT,

firstname VARCHAR(70),

lastname VARCHAR(70)

);

II. HTML&CSS
Tiếp theo là xây dựng code HTML và bind dữ liệu ra table bằng PHP

<table>
<?php
include('db.php');
$sql=mysql_query("select * from fullnames");
while($row=mysql_fetch_array($sql))
{
   $id=$row['id'];
   $firstname=$row['firstname'];
   $lastname=$row['lastname'];
?>
<tr id="<?php echo $id; ?>" class="edit_tr">

<td class="edit_td">
   <span id="first_<?php echo $id; ?>" class="text">
      <?php echo $firstname; ?>
   </span>
   <input type="text" value="<?php echo $firstname; ?>" class="editbox" id="first_input_<?php echo $id; ?>" />
</td>

<td class="edit_td">
   <span id="last_<?php echo $id; ?>" class="text">
      <?php echo $lastname; ?>
   </span> 
   <input type="text" value="<?php echo $lastname; ?>" class="editbox" id="last_input_<?php echo $id; ?>"/>
</td>

</tr>
<?php
}
?>
</table>

<table>

<?php

include('db.php');

$sql=mysql_query("select * from fullnames");

while($row=mysql_fetch_array($sql))

{

$id=$row['id'];

$firstname=$row['firstname'];

$lastname=$row['lastname'];

<tr id="<?php echo $id; ?>" class="edit_tr">

<span id="first_<?php echo $id; ?>" class="text">

<?php echo $firstname; ?>

</span>

<input type="text" value="<?php echo $firstname; ?>" class="editbox" id="first_input_<?php echo $id; ?>" />

</td>

<span id="last_<?php echo $id; ?>" class="text">

<?php echo $lastname; ?>

</span>

<input type="text" value="<?php echo $lastname; ?>" class="editbox" id="last_input_<?php echo $id; ?>"/>

</td>

</tr>

<?php

}

</table>

Thêm tí mắm muối cho nó đẹp chứ nhỉ

body
{
   font-family:Arial, Helvetica, sans-serif;
   font-size:14px;
}
.editbox
{
   display:none
}
td
{
   padding:5px;
}
.editbox
{
   font-size:14px;
   width:270px;
   background-color:#ffffcc;
   border:solid 1px #000;
   padding:4px;
}
.edit_tr:hover
{
   background:url(edit.png) right no-repeat #80C8E5;
   cursor:pointer;
}

body

{

font-family:Arial, Helvetica, sans-serif;

font-size:14px;

}

.editbox

{

display:none

}

{

padding:5px;

}

.editbox

{

font-size:14px;

width:270px;

background-color:#ffffcc;

border:solid 1px #000;

padding:4px;

}

.edit_tr:hover

{

background:url(edit.png) right no-repeat #80C8E5;

cursor:pointer;

}

III. Javascript
Đoạn mã jQuery bên dưới cho phép lấy ra Id của TR khi có sự kiện click hay change của class edit_tr. Sau đó gửi dữ liệu qua file table_edit_ajax.php bằng Ajax để xử lý.

<script type="text/javascript" src="https://ajax.googleapis.com/
ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
   $(".edit_tr").click(function()
   {
      var ID=$(this).attr('id');
      $("#first_"+ID).hide();
      $("#last_"+ID).hide();
      $("#first_input_"+ID).show();
      $("#last_input_"+ID).show();
   }).change(function()
    {
       var ID=$(this).attr('id');
       var first=$("#first_input_"+ID).val();
       var last=$("#last_input_"+ID).val();
       var dataString = 'id='+ ID +'&firstname='+first+'&lastname='+last;
       $("#first_"+ID).html('<img src="load.gif" />'); // Loading image

       if(first.length>0&& last.length>0)
       {

          $.ajax({
          type: "POST",
          url: "table_edit_ajax.php",
          data: dataString,
          cache: false,
          success: function(html)
          {
             $("#first_"+ID).html(first);
             $("#last_"+ID).html(last);
          }
       });
     }
     else
     {
        alert('Enter something.');
     }
});

// Edit input box click action
$(".editbox").mouseup(function() 
{
   return false
});

// Outside click action
$(document).mouseup(function()
{
   $(".editbox").hide();
   $(".text").show();
});

});
</script>

ajax/libs/jquery/1.5/jquery.min.js"></script>

$(document).ready(function()

{

$(".edit_tr").click(function()

{

var ID=$(this).attr('id');

$("#first_"+ID).hide();

$("#last_"+ID).hide();

$("#first_input_"+ID).show();

$("#last_input_"+ID).show();

}).change(function()

{

var ID=$(this).attr('id');

var first=$("#first_input_"+ID).val();

var last=$("#last_input_"+ID).val();

var dataString = 'id='+ ID +'&firstname='+first+'&lastname='+last;

$("#first_"+ID).html('<img src="load.gif" />'); // Loading image

if(first.length>0&& last.length>0)

{

$.ajax({

type: "POST",

url: "table_edit_ajax.php",

data: dataString,

cache: false,

success: function(html)

{

$("#first_"+ID).html(first);

$("#last_"+ID).html(last);

}

});

}

else

{

alert('Enter something.');

}

});

// Edit input box click action

$(".editbox").mouseup(function()

{

return false

});

// Outside click action

$(document).mouseup(function()

{

$(".editbox").hide();

$(".text").show();

});

</script>

IV. Table_edit_ajax.php
File này thực hiện xử lý dữ liệu, update dữ liệu vào db

<?php
include("db.php");
if($_POST['id'])
{
   $id=mysql_escape_String($_POST['id']);
   $firstname=mysql_escape_String($_POST['firstname']);
   $lastname=mysql_escape_String($_POST['lastname']);
   $sql = "update fullnames set firstname='$firstname',lastname='$lastname' where id='$id'";
   mysql_query($sql);
}
?>

<?php

include("db.php");

if($_POST['id'])

{

$id=mysql_escape_String($_POST['id']);

$firstname=mysql_escape_String($_POST['firstname']);

$lastname=mysql_escape_String($_POST['lastname']);

$sql = "update fullnames set firstname='$firstname',lastname='$lastname' where id='$id'";

mysql_query($sql);

}

Và cuối cùng là file db.php để kết nối tới csdl

<?php
   $mysql_hostname = "Host name";
   $mysql_user = "UserName";
   $mysql_password = "Password";
   $mysql_database = "Database Name";
   $bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("Could not connect database");
   mysql_select_db($mysql_database, $bd) or die("Could not select database");
?>

<?php

$mysql_hostname = "Host name";

$mysql_user = "UserName";

$mysql_password = "Password";

$mysql_database = "Database Name";

$bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("Could not connect database");

mysql_select_db($mysql_database, $bd) or die("Could not select database");

Chúc bạn thành công

Download code

(9Lessions)

Edit table bằng Jquery và Ajax

Like this:

Có liên quan

Nguyễn Trung Hiếu

Share this:

Like this:

Có liên quan

Nguyễn Trung Hiếu