I have a table with fetched data from the database.
I need a way to, by clicking on a specific cell, make the content on that cell editable and then save it into the database. Here is my code:
<table cellspacing="0" id="tabela1">
<tr><th>Data</th><th>Empresa</th><th>Função / Descrição</th></tr>
<tbody>
<?php
while ($pptable = mysql_fetch_array($pp, MYSQL_ASSOC))
{
$ppdata=$pptable['data'];
$ppemp=$pptable['empresa'];
$ppdesc=$pptable['descricao'];
foreach ($pptable as $ppdata){
echo "<tr><td>".$ppdata."</td><td>".$ppemp."</td><td>".$ppdesc."</td></tr>";
}
}
?>
</tbody>
</table>
Thanks !
You can always use native javascript but here is a jQuery plugin that is easy to use and you can do what you are looking for with ease.
http://www.appelsiini.net/projects/jeditable
Check out the demo page here:
You could switch the value into an input
$('#tabela1 tr td').on('click',function(){
var prev_text = $(this).text();
$(this).html('<input type="text" value="' + prev_text + '"/>');
$(this).focus();
});
$('#tabela1 tr td input').focusout(function(){
// Return to previous make validate/ajax call here.
});
Not Tested but that would be the basic logic behind.
But using existing Library would be better or use what @Ozmah said in his comment.