会JS 请进!!!

 我要实现的效果： 点击一个单元格单元格时单元格中显示一个文本框,文本框的值就是刚点击的单元格的值,单元格以前的值清空.
 下面的代码可以实现这个效果,但是当再点一下文本框时文本框的值就清空了而且也不能输入值,有哪位大侠能帮我写一个这样的效果出来吗?
   
<HTML>
<HEAD>
<TITLE> New Document </TITLE><SCRIPT LANGUAGE="JavaScript">
<!--
function aa(bb)
{
 var sts=bb.innerText;
 bb.innerHTML="<input type='text' id='tex' value="+sts+">"
 document.getElementById('tex').value=sts;
}
//-->
</SCRIPT>
<style >
#dv{
border:1px solid red;
}
</style>
</HEAD><BODY>
<table border=0 id="tab">
<tr >
<td onclick="aa(this)"  width="300" height="50" style="border='1px solid black'">aaaaaaaaaaaaaaaaaaaa</td>
</tr>
<table>
</BODY>
</HTML>