html - 如何使用按钮创建可编辑字段？

我为昵称，姓名和..创建了一些字段。
现在，我想使它们除昵称外可编辑。
我已经添加了按钮，但是现在我不知道如何使它们可编辑.....

这是HTML：

<div class="col-md-8 col-data">
                    <div class="container-data">Personal Information</div>
                    </div>

                                <div class="col-md-8 col-info pull-right">
                                <div class="FirstName">
                                <h7>First Name</h7>
                                <h6><img class="menu-dot" src="img/other/dot.png">John</h6>
                                 <button class="btn btn-success btn-edit pull-right">Edit info</button>
                                </div>
                                 </div>
                                    <div class="col-md-8 col-info pull-right">
                                    <div class="LastName">
                                    <h7>Last Name</h7>
                                    <h6><img class="menu-dot" src="img/other/dot.png">Doe</h6>
                                    <button class="btn btn-success btn-edit pull-right">Edit info</button>
                                    </div>
                                    </div>
                                        <div class="col-md-8 col-info pull-right">
                                        <div class="Email">
                                        <h7>E-mail</h7>
                                        <h6><img class="menu-info" src="img/other/email.png">[email protected]</h6>
                                        <button class="btn btn-success btn-edit pull-right">Edit info</button>
                                        </div>
                                        </div>
                                            <div class="col-md-8 col-info pull-right">
                                            <div class="DateofBirth">
                                            <h7>Date of Birth</h7>
                                            <h6><img class="menu-info" src="img/other/birth.png">26.2.1901</h6>
                                            <button class="btn btn-success btn-edit pull-right">Edit info</button>
                                            </div>
                                            </div>
                                                <div class="col-md-8 col-info pull-right">
                                                <div class="Gender">
                                                <h7>Gender</h7>
                                                <h6><img class="menu-info" src="img/other/gender2.png">Male</h6>
                                                <button class="btn btn-success btn-edit pull-right">Edit info</button>
                                                </div>
                                                </div>
                                                    <div class="col-md-8 col-info pull-right">
                                                    <div class="Mobile">
                                                    <h7>Mobile Number</h7>
                                                    <h6><img class="menu-info" src="img/other/mobile.png">[phone]</h6>
                                                    <button class="btn btn-success btn-edit pull-right">Edit info</button>
                                                    </div>




    </div>

这是CSS：

h6{
color:#FF6600;
font-size: 15px;
font-weight: italic;
}

h7{
color: #000;
font-size: 20px;
}
.container-data{
    color: #A7A7A7;
    position: left;
    margin-top: 3px;
    font-size: 20px;
    font-weight: bold;
 }

 .col-data{
    width: 75%;
    height: 40px;
    border-bottom: 5px solid #FF6600;
    background: #191919;
     border-top-right-radius: 5px;
      -moz-border-radius-topright: 5px;
      -webkit-border-top-right-radius: 5px;
    border-top-left-radius: 5px;
      -moz-border-radius-topright: 5px;
      -webkit-border-top-left-radius: 5px;
 }
 .col-info{
 width: 75%;
 border: 1px solid white;
 padding: 15px 15px;
 background: #E5E5E5;
 border-bottom-right-radius: 5px;
       -moz-border-radius-bottomright: 5px;
       -webkit-border-bottom-right-radius: 5px;
     border-top-right-radius: 5px;
      -moz-border-radius-topright: 5px;
      -webkit-border-top-right-radius: 5px;

      border-bottom-left-radius: 5px;
       -moz-border-radius-bottomright: 5px;
       -webkit-border-bottom-left-radius: 5px;
     border-top-left-radius: 5px;
      -moz-border-radius-topright: 5px;
      -webkit-border-top-left-radius: 5px;
 }

提前致谢！

最佳答案

这可能会有所帮助。

Name<input type="text" id="name" value="john" readOnly="readonly">

 <button type="button" id="btn" value="yes" class="btn" name="btn">click</button>

$('#btn').click(function(){
     $('#name').attr("readOnly", false);

}）;

关于html - 如何使用按钮创建可编辑字段？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31677508/