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

gaoqingchun2007 2009-09-10 10:02:35

<table id='t1' name='t1'>
<tr>
<td id='d1'>12</td>
</tr>
</table>

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

...全文

534 14 打赏收藏转发到动态举报

写回复

用AI写文章

14 条回复

切换为时间正序

请发表友善的回复…

发表回复

浴火_凤凰 2009-09-10

打赏
举报

[Quote=引用 2 楼 pt1314917 的回复:]
JScript code<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¡
[/Quote]

很简单啊，呵呵

BeenZ 2009-09-10

打赏
举报

我用IE6,完全没问题.....
保留值的话去掉 this.innerText="" 和input.value=text

我这里IE6 7 8 Chrome下测试均通过

gaoqingchun2007 2009-09-10

打赏
举报

[Quote=引用 9 楼 beenz 的回复:]
解决方法
替换我的alertMe方法为
JScript codefunction alertMe(){var text=this.innerText;this.innerText=""var input=document.createElement("input");
input.value=textthis.appendChild(input)
}
[/Quote]
this.appendChild(input)报“意外地调用了方法或属性访问”错误，另外我的意思是保留td里的值然后再添加文本框，谢谢你的帮助

li1229363 2009-09-10

打赏
举报

添加个div就没有事情了……

BeenZ 2009-09-10

打赏
举报

解决方法
替换我的alertMe方法为



function alertMe(){

            var text=this.innerText;

            this.innerText=""

            var input=document.createElement("input");

            input.value=text

            this.appendChild(input)

        }

gaoqingchun2007 2009-09-10

打赏
举报

[Quote=引用 7 楼 beenz 的回复:]
未知运行错误出现原因:
innerHTML 对下面的对象只读（ <=IE7）
table,thead,tfoot,tbody,tr,col,colgroup,html,title,style,frameset
[/Quote]
我的虽然是IE6，但是如你上述，我取得的是td阿 obj.innerHTML+=" <input type='text' id='t1' > </input>";

BeenZ 2009-09-10

打赏
举报

未知运行错误出现原因:
innerHTML 对下面的对象只读（<=IE7）
table,thead,tfoot,tbody,tr,col,colgroup,html,title,style,frameset

BeenZ 2009-09-10

打赏
举报



<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>

gaoqingchun2007 2009-09-10

打赏
举报

[Quote=引用 1 楼 beenz 的回复:]
HTML code
<html><head><metahttp-equiv="content-type" content="text/html; charset=utf-8"><METAhttp-equiv="Content-Style-Type" content="text/css"></head><scriptlanguage=javascript>var TH_HEIGHT="20px";¡
[/Quote]
报“未知的运行时错误”

popule_daisy 2009-09-10

打赏
举报

gaoqingchun2007 2009-09-10

打赏
举报

注：td里的值12继续保留

pt1314917 2009-09-10

打赏
举报

<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>

BeenZ 2009-09-10

打赏
举报



<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>