点击按钮“编辑” 动态添加一个input text

来源:互联网 发布:java web生产验证吗 编辑:程序博客网 时间:2024/05/22 08:23

点击button按钮 动态把原来转变成一个input type="text"文本框 文本的默认值是div值 可以对其更改保存。

<div id="dd3">

<span>总价值</span><p>23948</p>
<div class="txt">父母的保单</div>
<input type="button" value="编辑" id="edit">
<div class="img"> </div>

</div>

//css部分

/*动态添加的文本框样式*/
#d3 .newipt{
border:0px;
width: 72px;
height: 20px;
top: -3px;
position: relative;
border-radius: 3px 3px;
color: #c4c4c4;
}


//js部分

var isEdit=false;
$("document").ready(function(){
$("#edit").click(function(){
if(isEdit) return ;
isEdit=true;
if("input[value=编辑]"){
var t=$(this).prev().text();
$(this).prev().html("<input type='text' value='"+t+"'class='newipt'/>");
$(".txt input").focus(function(){
document.getElementById("edit").value="确定";
});
$(".txt input").change(function(){
var t=$(this).val();
$(this).parent().text(t);
isEdit=false;
});
}
});

原创粉丝点击