How To Inline Editing Record Using PHP

Submitted by alpha_luna on Tuesday, April 19, 2016 - 15:44.
Related Code: Add, Edit, Delete Records In Database If you are looking for on How To Inline Editing Record Using PHP then you are at the right place. Previously, we created a simple Add, Edit, Delete Records In Database tutorial, so you can do this also. This is an editable data inside in the table, and allow the user to edit the data by clicking it. When you click the data that you want to edit, the background color will change and that the sign you are already editing the data inside the table. Table - HTML This HTML code where the user can edit the data inside the table.
  1.             <table class="table_holder" border="1">
  2.                   <thead>
  3.                           <tr>
  4.                                 <th class="table-header" width="10%">No.</th>
  5.                                 <th class="table-header">Title</th>
  6.                                 <th class="table-header">Description</th>
  7.                           </tr>
  8.                   </thead>
  9.                   <tbody>
  10.                   <?php
  11.                   foreach($faq as $k=>$v) {
  12.                   ?>
  13.                           <tr class="table-row">
  14.                                 <td><?php echo $k+1; ?></td>
  15.                                 <td contenteditable="true" onBlur="saveToDatabase(this,'question','<?php echo $faq[$k]["id"]; ?>')" onClick="showEdit(this);"><?php echo $faq[$k]["title"]; ?></td>
  16.                                 <td contenteditable="true" onBlur="saveToDatabase(this,'answer','<?php echo $faq[$k]["id"]; ?>')" onClick="showEdit(this);"><?php echo $faq[$k]["description"]; ?></td>
  17.                           </tr>
  18.                 <?php
  19.                 }
  20.                 ?>
  21.                   </tbody>
  22.                 </table>
jQuery Script This script will help the user if he/she already in the editing data in the table.
  1. <script src="js/code_js.js"></script>
  2. <script>
  3. function showEdit(editTable_content) {
  4.         $(editTable_content).css("background","azure").css("font-size","20px");
  5. }
  6.  
  7. function saveToDatabase(editTable_content,column,id) {
  8.         $(editTable_content).css("background","#FFF url(loaderIcon.gif) no-repeat right");
  9.         $.ajax({
  10.                 url: "saveedit.php",
  11.                 type: "POST",
  12.                 data:'column='+column+'&editval='+editTable_content.innerHTML+'&id='+id,
  13.                 success: function(data){
  14.                         $(editTable_content).css("background","#FDFDFD");
  15.                 }        
  16.    });
  17. }
  18. </script>
And, this is the style.
  1. <style type="text/css">
  2. body {
  3.         width:700px;
  4.         margin:auto;
  5. }
  6. .current-row {
  7.         background-color:#B24926;
  8.         color:#FFF;
  9. }
  10. .current-col {
  11.         background-color:#1b1b1b;
  12.         color:#FFF;
  13. }
  14. .table_holder {
  15.         width: 100%;
  16.         font-size:large;
  17.         background-color: white;
  18.         border:blue 1px solid;
  19.         cursor:pointer;
  20. }
  21. .table_holder th.table-header {
  22.         padding: 5px;
  23.         text-align: left;
  24.         padding:10px;
  25. }
  26. .table_holder .table-row td {
  27.         padding:10px;
  28.         background-color: white;
  29. }
  30. </style>
This is the ouput: Result So what can you say about this work? Share your thoughts in the comment section below or email me at [email protected]. Practice Coding. Thank you very much.
Tags
Inline
edit record

Add new comment

About text formats
  • 97 views