Making table cells editable on click

Question

I am trying to make a table which get its data from database. Now what I actually want to do is that when ever user clicks on a cell of any row, the data in cell should be editable. I am unable to figure it out to how to do that and also is there any way when user is done editing then I can save the changes in my database. Any suggestion are greatly appreciated

http://stackoverflow.com/questions/6012823/how-to-make-html-table-cell-editable?rq=1 — gbestard, Aug 12 '14 at 07:43
@gbestard thank you :) its now editable... is there any way when user is done editing then i can save the changes in my database ? — user3932360, Aug 12 '14 at 07:53

score 1 · Answer 1 · answered Aug 12 '14 at 07:55

Here is a simple way to start out with using JQuery and simple HTML.Gives you a good starting point

HTML

<table border="1">
    <tr>
        <td>
            <input type="text"/>
        </td>
        <td>
            <input type="text"/>
        </td>
    </tr>
</table>

CSS

input{
    display:none;
    height:100%;
}

table{
    height:100px;
    width:300px;    
}

table td{
    width:50%;   
    height:100%;
}

JQuery

$(document).ready(function(){
    $('table tr td').on('click', function(){
        $('input[type="text"]',this).css('display','block');
    });    
});

I have cooked up a fiddle for you. DEMO

Making table cells editable on click

1 Answers1