做一个td双击事件,让文本框获得焦点

Question

在一个table里面.我在每个td里面添加了.双击事件,当双击时.我在td里面显示文本框..我想要让文本框获得焦点.直接可以输入数据,..代码如下
<input type='text' id='TDTextValueID' name='TDTextValue' value='"+TDValue+"' style='width:70px' onblur='BlurTd("+i+","+j+","+TDValue+")'/>
当我失去焦点的时候,我要去获得文本框的..把文本框的值去掉.在换成TD显示

Answer 1

把onblur写给td..
失去焦点的时候.
firstChild或者getElementsByTagName("INPUT")[0].innerHTML取到值.
removeChild()把文本框去掉.
再把取到的值塞给td

Answer 2

<script src="JS/jquery-1.4.2.js" type="text/javascript"></script>
    <script type="text/javascript">
 $(function() {
 $("table#testTable tr:first-child").nextAll().find("td").dblclick(function() {
                $(this).children().show().focus();
            });
        });
    </script>
<table id="testTable">
            <tr>
                <td>Col1</td>
                <td>Col2</td>
                <td>Col3</td>
            </tr>
               <tr>
                <td style="border:solid 1px red;height:20px">
                        <input type='text' style="display:none" />
                </td>
                <td style="border:solid 1px red;height:20px">
                        <input type='text' style="display:none" />
                </td>
                <td style="border:solid 1px red;height:20px">
                        <input type='text' style="display:none" />
                </td>
            </tr>
        </table>

Answer 3

//保存跑一下，就知道效果了。<table width="500" border="0" cellpadding="1" cellspacing="1" bgcolor="#666666" id="test">
  <tr>
    <td width="100" height="30" bgcolor="#FFFFFF">1</td>
    <td width="100" height="30" bgcolor="#FFFFFF">2</td>
    <td width="100" height="30" bgcolor="#FFFFFF">3</td>
    <td width="100" height="30" bgcolor="#FFFFFF">4</td>
    <td width="100" height="30" bgcolor="#FFFFFF">5</td>
  </tr>
  <tr>
    <td width="100" height="30" bgcolor="#FFFFFF">6</td>
    <td width="100" height="30" bgcolor="#FFFFFF">7</td>
    <td width="100" height="30" bgcolor="#FFFFFF">8</td>
    <td width="100" height="30" bgcolor="#FFFFFF">9</td>
    <td width="100" height="30" bgcolor="#FFFFFF">10</td>
  </tr>
  <tr>
    <td width="100" height="30" bgcolor="#FFFFFF">11</td>
    <td width="100" height="30" bgcolor="#FFFFFF">12</td>
    <td width="100" height="30" bgcolor="#FFFFFF">13</td>
    <td width="100" height="30" bgcolor="#FFFFFF">14</td>
    <td width="100" height="30" bgcolor="#FFFFFF">15</td>
  </tr>
</table>
<script language="javascript">
function blurinput(obj)
{
   var vl=obj.value;
   obj.parentNode.innerText=vl;}
var tdclick=function(obj){
return function(){
var h=obj.innerText;
if(h)
{
obj.innerHTML="<input type='text' id='"+h+"id' name='TDTextValue' value='"+h+"' style='width:100%' onblur='blurinput(this)'/>"
}
document.getElementById(h+"id").focus();
}
}
var tables = document.getElementById("test");
var allcell=tables.cells
for(i=0;i<allcell.length;i++)
{
allcell[i].attachEvent("onclick",tdclick(allcell[i]));
}  </script>