What would be a good way to insert data by clicking on the cell in a table?

[yoursurrogategod]

I have no idea where the best place would be to post this.

 

But basically what I'd like to do is have a table:

+-----------+-----------+-----------+-----------+
| Header #1 | Header #2 | Header #3 | Header #4 |
+-----------+-----------+-----------+-----------+
| Data #1   | Data #2   | Data #3   | Data #4   |
+-----------+-----------+-----------+-----------+
| Data #5   | Data #6   | Data #7   | Data #8   |
+-----------+-----------+-----------+-----------+

 

Now, Data #X is what's located in the database. What I'd like to do is give the user the option to click on the cell and then have that turn into a text-box so that they can change Data #2 into Data #44. What would be a good example of doing this?

 

The back-end scripting language is PHP with Zend Framework 1.12, in case you're wondering.

[codefossa]

Something like this could work.

Demo: http://xaotique.no-ip.org/tmp/43/

 

HTML

<table id="data" border="1">
   <tr>
       <td></td>
       <td></td>
       <td></td>
   </tr>
   <tr>
       <td></td>
       <td></td>
       <td></td>
   </tr>
   <tr>
       <td></td>
       <td></td>
       <td></td>
   </tr>
</table>

 

Javascript / jQuery

// Let page load
$(document).ready(function()
{
// Global var
var input = $(document.createElement("input")).attr("type", "text").css("width", "96%");

// Ask for input
$("#data tr td").click(function()
{
	// If same element, don't do anything ELSE set HTML
	if ($(this)[0] == input.parent()[0])
		return false;
	else
		input.parent().html(input.val());

	// Set value of input for editing
	input.val($(this).html());

	// Watch for pressing enter to stop editing
	input.keyup(function(e)
	{
		if (e.which == 13)
			input.parent().html(input.val());
	});

	// Add input box and focus on it
	$(this).html(input);
	input.focus();
});
});

Edited January 23, 2013 by Xaotique