怎样动态向td中插入一个文本框

<table id='t1' name='t1'>
<tr>
<td id='d1'>12</td>
</tr>
</table>我现在想当td失去焦点后，在td内插入一个文本框<input id='txt1' value='123'/>
先谢谢了

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <META http-equiv="Content-Style-Type" content="text/css">

    </head>
    <script language=javascript>
        var TH_HEIGHT="20px";
        var THCOLOR="#ffff99";
        var THBGCOLOR= "#ccecff";
        var NEW_COLOR="#ffffff";
        var lastObj;
        function createEventTable() {
            var newRow,col1,col2,col3;
            var ln = document.getElementById("tb1").rows.length;
            if( ln > 0){
                for(var i=0; i<ln; i++){
                    if(document.getElementById("tb1").rows.length <= 0)break;
                    document.getElementById("tb1").deleteRow(-1);
                }
            }
            for(var colno=0; colno<15; colno++){
                newRow = document.getElementById("tb1").insertRow(-1);
                newRow.id = 'r'+colno;
                document.getElementById("r"+colno).height = TH_HEIGHT;
                document.getElementById("r"+colno).bgColor = THCOLOR;
                col1=newRow.insertCell(0);
                col2=newRow.insertCell(1);
                col3=newRow.insertCell(2);
                col1.id="col1"+colno
                col2.id = "col2"+colno;
                col3.id = "col3"+colno;
                col1.innerText = " " ;
                col2.innerText = " ";
                col3.innerText = " ";
                col1.onblur=alertMe;
                col2.onblur=alertMe
                col3.onblur=alertMe
            }
        }
        function alertMe(){
            this.innerHTML="<input type=text />"
        }
        window.onload=function(){
            createEventTable();
        }
    </script>
    <body >
        <TABLE  cellSpacing="0" borderColorDark="black" cellPadding="1" borderColorLight="black"  border="1">
            <thead>
            <COLGROUP>
                <COL align="center">
                </COL>
                <COL align="center">
                </COL>
                <COL align="center">
                </COL>
                <COL align="center">
                </COL>
            <TR height="22px" bgColor="#ccecff" id="sss">
                <TH width="36" >列1</TH>
                <TH width="36" >列2</TH>
                <TH width="36" >列3</TH>
            </TR>
        </thead>
        <TBODY id="tb1">
        </TBODY>
    </TABLE></body>
</html>
<table id='t1' name='t1'>
<tr>
<td id='d1' onblur="javascript:wsp(this)">12 </td>
</tr>
</table> <script>
function wsp(obj)
{
     obj.innerHTML+="<input type='text' id='t1' ></input>";
}
</script>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <META http-equiv="Content-Style-Type" content="text/css">

    </head>
    <script language=javascript>
        var TH_HEIGHT="20px";
        var THCOLOR="#ffff99";
        var THBGCOLOR= "#ccecff";
        var NEW_COLOR="#ffffff";
        var lastObj;
        function createEventTable() {
            var newRow,col1,col2,col3;
            var ln = document.getElementById("tb1").rows.length;
            if( ln > 0){
                for(var i=0; i<ln; i++){
                    if(document.getElementById("tb1").rows.length <= 0)break;
                    document.getElementById("tb1").deleteRow(-1);
                }
            }
            for(var colno=0; colno<15; colno++){
                newRow = document.getElementById("tb1").insertRow(-1);
                newRow.id = 'r'+colno;
                document.getElementById("r"+colno).height = TH_HEIGHT;
                document.getElementById("r"+colno).bgColor = THCOLOR;
                col1=newRow.insertCell(0);
                col2=newRow.insertCell(1);
                col3=newRow.insertCell(2);
                col1.id="col1"+colno
                col2.id = "col2"+colno;
                col3.id = "col3"+colno;
                col1.innerText = "列一"+ colno;
                col2.innerText = "列二"+colno;
                col3.innerText = "列三"+colno;
                col1.onblur=alertMe;
                col2.onblur=alertMe
                col3.onblur=alertMe
            }
        }
        function alertMe(){
            this.innerHTML="<input type=text value=" +this.innerText+" />"
        }
        window.onload=function(){
            createEventTable();
        }
    </script>
    <body >
        <TABLE  cellSpacing="0" borderColorDark="black" cellPadding="1" borderColorLight="black"  border="1">
            <thead>
            <COLGROUP>
                <COL align="center">
                </COL>
                <COL align="center">
                </COL>
                <COL align="center">
                </COL>
                <COL align="center">
                </COL>
            <TR height="22px" bgColor="#ccecff" id="sss">
                <TH width="36" >列1</TH>
                <TH width="36" >列2</TH>
                <TH width="36" >列3</TH>
            </TR>
        </thead>
        <TBODY id="tb1">
        </TBODY>
    </TABLE></body>
</html>
未知运行错误出现原因:
innerHTML 对下面的对象只读（<=IE7）
table,thead,tfoot,tbody,tr,col,colgroup,html,title,style,frameset
我的虽然是IE6，但是如你上述，我取得的是td阿  obj.innerHTML+=" <input type='text' id='t1' > </input>";
解决方法
替换我的alertMe方法为function alertMe(){
            var text=this.innerText;
            this.innerText=""
            var input=document.createElement("input");
            input.value=text
            this.appendChild(input)
        }
this.appendChild(input)报“意外地调用了方法或属性访问”错误，另外我的意思是保留td里的值然后再添加文本框，谢谢你的帮助
我用IE6,完全没问题.....
保留值的话去掉 this.innerText="" 和input.value=text我这里IE6 7 8 Chrome下测试均通过