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

_Nutra

已于 2022-10-20 09:38:05 修改

阅读量2.6k

点赞数

文章标签：点击编辑动态添加input

于 2013-10-22 00:00:25 首次发布

本文链接：https://blog.csdn.net/lling66/article/details/12924535

版权

点击button按钮，动态把原来div转变成一个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;
        });
    }
});