Question

html编辑个人资料按钮功能实现

个人资料网页中有文本框，单选和多选按钮，下拉菜单，怎么样点一下编辑就使得页面进入编辑状态？？？

比如文本框，先是显示原有姓名，点击edit就出现文本框，可保存或者取消
谢谢诸位大神了！麻烦大神写一下代码吧





Answer 1

你好 很高兴为你解答

兄弟，不要想着先看代码。我先和你讲下思路。你如果还是不会，我再帮你敲出代码。行不？
修改个人资料，你肯定知道。你只想知道为什么他点击在edit，就能修改。其实这个就像变魔术一样。本来也许是个<p>标签。他点击一下edit触发一个事件，把<p>标签换成一个文本框并带这用户的信息做为value就可以了。jquery就能很简单的实现。

希望可以帮到楼主，纯手打，望采纳，好人一生平安。

可以追问。

Answer 2

可以先使用一个数组来记录表单的情况

例如

arr={"text1":{"id":"text1","type":"text","value":"value1"},"radio1":{"id":"radio1","type":"radio","value":"value1","items":{"radio_item1":"value1","radio_item2":"value2"}},"checkbox1":{"id":"checkbox1","type":"checkbox","value":"value1"},"items":{"checkbox_item1":"value1","checkbox_item2":"value2"},"select1":{"id":"select1","type":"select","value":"value1"},"items":{"select_item1":"value1","select_item2":"value2"}};

一般是用table来显示吧，设置每个项目所在的td对应的id和arr中id一致

用jquery来实现

$("按钮").click(function(){
    if(!$(this).data("flag")){
        $(this).data("flag",yes);
        //实现切换到表单        
        $.each(arr,function(i,v){
            if(v.type=="text"){
                $obj = $('<input type="'+v.type+'" value="'+v.value+'"></input>');
                $obj.change(function(){
                    arr[i]["value"] = $(this).val();
                });
                $("#"+v.id).html('').append($obj);
            }else if(v.type=="radio"){
            }
            else if(v.type=="checkbox"){
            }
            else if(v.type=="select"){
            }
        });
    }else{
        $(this).removeData("flag");
        //实现切换到文字
        $.each(arr,function(i,v){
            $("#"+v.id).html(v.value);
        });
    }
});