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.
|
1 2 3 4 5 6 |
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
|
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 |
<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> |
Thêm tí mắm muối cho nó đẹp chứ nhỉ
|
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 |
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; } |
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ý.
|
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 |
<script type="text/javascript" src="http://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> |
IV. Table_edit_ajax.php
File này thực hiện xử lý dữ liệu, update dữ liệu vào db
|
1 2 3 4 5 6 7 8 9 10 11 |
<?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
|
1 2 3 4 5 6 7 8 |
<?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
(9Lessions)
