Edit table content(s) and save it to database

Question

I have a HTML table which shows data from a database and I want the table to be editable. I already tried to use contenteditable but after that I just have no idea how to save the changes. The table has columns which contain date. Simple solution is much appreciated since I don't know much about web programming here is table my code:

<div class="table-responsive">
    <table class="table table-striped table-bordered table-hover" id="dataTables-example">
        <thead>
            <tr>
                <th><center>NO.</th>
                <th><center>TANGGAL MASUK</th>
                <th><center>TANGGAL MEMO</th>
                <th><center>NO. MEMO</th>
                <th><center>DARI</th>
                <th><center>PERIHAL</th>
                <th><center>TUJUAN</th>
                <th><center>DISPOSISI</th>
                <th><center>KETERANGAN</th>
                <th><center>EDIT</th>
                <th><center>FILE</th>
                </tr>
            </thead>
            <tbody>
            <?php $i = 1;
            $query = mysql_query("select * from memo_masuk");
            while ($data = mysql_fetch_array($query)) {
            ?>
                <tr>
                <td><center><?php echo $i; ?></center></td>
                <td contenteditable><center><?php echo $data['Tgl_masuk']; ?></center></td>
                <td contenteditable><center><?php echo $data['Tgl_memo']; ?><center></td>
                <td contenteditable><center><?php echo $data['No_memo']; ?></center></td>
                <td contenteditable><center><?php echo $data['Dari']; ?></center></td>
                <td contenteditable><center><?php echo $data['Perihal']; ?></center></td>
                <td contenteditable><center><?php echo $data['Tujuan']; ?></center></td>
                <td contenteditable><center><?php echo $data['Disposisi']; ?></center></td>
                <td contenteditable><center><?php echo $data['Keterangan']; ?></center></td>
                <td><center><a href="edit-memo-masuk.php"><button>EDIT</button></a></center></td>
                </tr>
            <?php $i++; } ?>
        </tbody>
    </table>
</div>

Answer 1

You should need to play around with the local storage and also need to add more ajax to it. The front end editing is never a good idea to store and changes things in db but here is what you should try

<div class="table-responsive">




 $table_name = 'memo_masuk'; 
            <table class="table table-striped table-bordered table-hover" id="dataTables-example">
            $query = mysql_query("select * from " . $table_name);

                <thead>
                    <tr>
                        <th><center>NO.</th>

                         <?php
                                $row = mysql_fetch_assoc($query);
                                    foreach ($row as $col => $value) {
                                        echo "<th>";
                                        echo $col;
                                        echo "</th>";
                                    }

                              ?>

                        <th><center>EDIT</th>
                        <th><center>FILE</th>
                        </tr>
                    </thead>

This will pull the header or columns from db and set them as head, I do it because in development you should be able to see if the data is according to your need

  <tbody>
                    <?php $i = 1;
                    mysql_data_seek($query, 0);
                    while ($data = mysql_fetch_array($query)) {
                    ?>
                        <tr>
                        <td><center><?php echo $i; ?></center></td>
                        <section id="editable" contenteditable="true"> 
                        <td contenteditable><center><?php echo $data['Tgl_masuk']; ?></center></td>
                        <td contenteditable><center><?php echo $data['Tgl_memo']; ?><center></td>
                        <td contenteditable><center><?php echo $data['No_memo']; ?></center></td>
                        <td contenteditable><center><?php echo $data['Dari']; ?></center></td>
                        <td contenteditable><center><?php echo $data['Perihal']; ?></center></td>
                        <td contenteditable><center><?php echo $data['Tujuan']; ?></center></td>
                        <td contenteditable><center><?php echo $data['Disposisi']; ?></center></td>
                        <td contenteditable><center><?php echo $data['Keterangan']; ?></center></td>
                        </section>
                        <td><center><a href="edit-memo-masuk.php"><button>EDIT</button></a></center></td>
                        </tr>
                    <?php $i++; } ?>
                </tbody>
            </table>
        </div>

          <div>
    <input type="button" id="clear" value="Clear changes" />  <input type="button" id="save" value="Save changes" />
  </div>

Your using html5 which is not compatible to all the browsers. If you want to edit table content. Now for the execution of changes. Follow this script

<script type="text/javascript">
var editable = document.getElementById('editable');

addEvent(editable, 'blur', function () {
  // lame that we're hooking the blur event
  localStorage.setItem('contenteditable', this.innerHTML);
  document.designMode = 'off';
});

addEvent(editable, 'focus', function () {
  document.designMode = 'on';
});

addEvent(document.getElementById('clear'), 'click', function () {
  localStorage.clear();
  window.location = window.location; // refresh
});

if (localStorage.getItem('contenteditable')) {
  editable.innerHTML = localStorage.getItem('contenteditable');
}

 $(document).ready(function(argument) {
 $('#save').click(function(){
 // Get edit field value
 $edit = $('#editable');
 $.ajax({
 url: 'get.php',
 type: 'post',
 data: {data: $edit},
 datatype: 'html',
 success: function(rsp){
 alert(rsp);
 }
 });
 });
 });
</script>

you need to tweak it a little for your own settings for now only one variable or column is updated the get php is the basic file that will be used for putting the data in db

//get.php
<?php
$editData = $_POST['data'];

// Add your validation and save data to database something like update query

echo $editData;
?>

Hope this will help