<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<style>
td {
border: solid 1px gray;
padding-left: 0.3em;
padding-right: 0.3em;
cursor: pointer;
}
</style>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
<script>
jQuery(function($){
$('td').click(function() {
var inputs = $(this).children("input");
var text = $(this).text();
var inp;
if (inputs.length == 0) {
inp = $(document.createElement("input")).attr("size", text.length).val(text);
$(this).empty().append(inp);
inp.focus();
inp.on("blur", function () {
$(this).parent().html($(this).val());
});
}
});
});
</script>