请教一个JS修改页面内容的例子

Question

$(document).ready(function()
{
  $("table tr td").click(function()
  {
     this.html("<input   name=\"\"   id=\"\"   value=\"Text\" /> "); 
  });
});

Answer 1

<script>
function change(td){
    var html="<input name=''   id=''   value='$'/>";
    td.innerHTML=html.replace("$",td.innerHTML);
}
</script>
<table>
<tr>
<td onclick="change(this)">21314asdfaf</td>
</tr>
</table>

Answer 2

1楼的代码不是常见的。
二楼的正正是所需要的。。
但是二楼的代码在再次点击时INPUT里面就变成了 <INPUT id="" value=21314asdfaf name="">如何才能让下次单击的时候INPUT里面仍然是现在内容方便修改。。还有每次刷新之后页面里面的值又变回原来的样子了。。怎样才能在他刷新之后这个页面的值已经保存成现在修改之后的值呢？

Answer 3

<script>
function change(td){
    var html="<input name=''   id=''   value='$'/>";
    td.innerHTML=html.replace("$",td.innerHTML);
    td.getElementsByTagName("input")[0].focus();
    td.onclick=null;
    td.getElementsByTagName("input")[0].onblur=function(){
        td.innerHTML=this.value;
        td.onclick=function(){change(this)};
    }
}
</script>
<table>
<tr>
<td onclick="change(this)">21314asdfaf</td>
</tr>
<tr>
<td onclick="change(this)">21314asdfaf</td>
</tr>
</table>