<script type="text/javascript">
function showForm(id) {
var myParam=document.getElementById(id);
myParam.innerHTML="<input type=\"text\" id=\"newval\" />";
}
</script>

<tr>
<td id="td1<?=$my['id']?>" onclick="showForm('td1<?=$my['id']?>')"><?=$my['name']?></td>
<td id="td2<?=$my['id']?>" onclick="showForm('td2<?=$my['id']?>')"><?=$my['pass']?></td>
<td id="td3<?=$my['id']?>" onclick="showForm('td3<?=$my['id']?>')"><?=$my['city']?></td>
</tr>

<style>
table{width:100%}
td{width:33%;height:20px;padding:0;}
input{width:100%;border: none;padding:0;height:20px;font:inherit;}
</style>
<table id="table" border="1">
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>
<script>
(function(){
    var table = document.getElementById('table');
    var onclick = function() {
        var input = document.createElement('input');
        input.value = this.innerText || this.textContent;
        this.innerHTML = '';
        this.appendChild(input).focus();
        input.onblur = function() {
            this.parentNode.appendChild(document.createTextNode(this.value));
            this.parentNode.removeChild(this);
        };
        input.onclick = function(event) {
        if (event)
            event.stopPropagation();
        else
            window.event.cancelBubble = true;
        }
    };
    for (var i = 0, row; row = table.rows[i]; i++)
        for (var j = 0, cell; cell = row.cells[i]; i++)
            cell.onclick = onclick;
})()
</script>