Change row value onclick html table like phpMyAdmin - php

Question

I'm basically trying to use a simple method of editing table stored inside a mySQL database, but don't want to go through a different editing page, so my theory is :
Show all data inside a HTML table as usual would as followed.
<table class="table table-bordered sortable">
<thead>
<tr>
<th>Marchant</th>
<th>URL</th>
<th>Status</th>
<th>Sold</th>
<th>Deals</th>
<th>Sites</th>
<th>Found</th>
<th>Seen</th>
</tr>
</thead>
<tbody>
<tr>
<td>value</td>
<td></td>
<td></td>
<td>Sold here</td>
<td>Deals here</td>
<td>Sites here</td>
<td>null</td>
<td>null</td>
</tr>
</tbody>
I want to be able to edit the data on the fly, simply by clicking on the value displayed and changing it.
The question is how would i go about by doing this, is it even possible ?

Answer 1

If you're using jQuery check out edit-in-place plugins (jEditable is a good one).
The idea behind this is to set up a click event listener on the table cell, in which you append an editable textarea/form with the contents of the TD.
On change or submit the data is sent trough an ajax request to the server, which updates the DB and eventually returns back sanitized data (you update the TD contents with it).

Answer 2

Yes, its possible.
It's mostly frontend.
Here is example of creating input after you click on a cell. (jQuery)
// once page is loaded
$(document).ready(function() {
// adding an event when the user clicks on <td>
$('td').click(function() {
// create input for editing
var editarea = document.createElement('input');
editarea.setAttribute('type', 'text');
// put current value in it
editarea.setAttribute('value', $(this).html());
// rewrite current value with edit area
$(this).html(editarea);
// set focus to newly created input
$(editarea).focus();
});
});
After this you can add event to newly created input. (for example when user hits Enter)
Then you do AJAX request and send new values to a .php script.
You also need to add id to a newly created element so you know exactly what cell is needed to be changed after data is sent via AJAX.
Also, don't forget to validate data before putting to MySQL.
So if everything went good or not you return value back, and according to the value you write JavaScript code to to remove element from a cell / put edited value or popup a message.
Hope this helps.