Since you've posted this with a jQuery tag, here goes. Whilst your question isn't 100% clear you are wanting to do the code below and as demonstrated at jsfiddle should be enough to get you going. It is assumed you want to add a textarea to a cell when someone clicks on that row.
DEMO: http://jsfiddle.net/7x36X/
HTML:
<table border="1px" id="myTable" cols="3">
<tr>
<td id="td1">Cell 1</td>
<td id="td2">Cell 2</td>
<td id="td3">Cell 3</td>
</tr>
<tr>
<td id="td1">Cell 1</td>
<td id="td2">Cell 2</td>
<td id="td3">Cell 3</td>
</tr>
<tr>
<td id="td1">Cell 1</td>
<td id="td2">Cell 2</td>
<td id="td3">Cell 3</td>
</tr>
<tr>
<td id="td1">Cell 1</td>
<td id="td2">Cell 2</td>
<td id="td3">Cell 3</td>
</tr>
<tr>
<td id="td1">Cell 1</td>
<td id="td2">Cell 2</td>
<td id="td3">Cell 3</td>
</tr>
</table>
JAVASCRIPT/jQuery:
$(document).ready(function () {
//Listen to a click on a tr
$('tr').on('click', function (event) {
//check that we are clicking in a new row else do nothing
if ($('.someInput', $(this)).length == 0) {
// get the last td as our target for example
var targetTD = $('td:last', $(this));
//get previous content of the TD
var previousContent = targetTD.text();
// Now add in a textarea with a save button
targetTD.html('<textarea class="someInput">' + previousContent + '</textarea><button class="saveButton">Save</button>');
// Do whatever else you need to do here to make your changes persistent e.g. AJAX to server
}
});
// We are adding what is called a delegated event listener for the save buttons which haven't been created yet.
$('#myTable').on('click', '.saveButton', function (event) {
// get the target TD
var targetTD = $(this).parent();
// get Textarea text
var text = $(this).siblings('.someInput').val();
// Set the targetTD html as the text
targetTD.html(text);
});
});