点击编辑文字个文字保存

//点击编辑文字和文字保存demo

 

下面是css样式和结构布局

 <style>
        *{padding: 0;
            margin:0;

        }
        body{ background:linear-gradient(#A1E6E9 0%,#fff 100%) no-repeat;
            min-height:400px;
            font-size:14px;}
        .wrap{
            width:500px ;
            margin:30px auto;
            padding: 30px;
            border-radius: 8px;
            box-shadow:0px 0px 10px #5AB1FD;
        }
        h2{
            margin-bottom:15px;
            font-size: 14px;
        }
        ul{
            border-top:1px dotted #000;
        }
        li{
            list-style:none;
            line-height:30px;
            border-bottom:1px dotted #000;
            padding:10px 0;
        }
        li span{
            line-height:32px;
        }
        li a{
            margin-left:20px;
            color:#5AB1FD;
            cursor:pointer;
        }
        li input{
            width:320px;
            line-height:30px;
            border:1px solid #5AB1FD;
            margin-right:10px;
            padding-left:5px;
            margin-left:-5px;
            display: none;
        }
        li button{
            width:60px;
            line-height:30px;
            margin-left:10px;
            background:#5AB1FD;
            border:1px solid #5AB1FD;
            color:#fff;
            border-radius:3px;
            display: none;

        }
        .edit_li span, .edit_li a{
            display:none;
        }
      .edit_li input, .edit_li button{
            display:inline-block;
            margin: 0px;
        }
    </style>






 <div class="wrap">
       <h2>点击编辑</h2>
       <ul>
           <li>
               <span>为什么要学英语呀</span>
               <a>编辑</a>
               <input type="text">
               <button class="save">保存</button>
               <button class="cancel">取消</button>
           </li>
           <li>
                <span>因为我不会啊</span>
                <a>编辑</a>
                <input type="text">
                <button class="save">保存</button>
                <button class="cancel">取消</button>
            </li>
       </ul>
   </div>

　接下来来到了我们的主题部分了，如何使用javascript来实现这一功能呢？

<script>
    //首先我们需要获取到我们需要操作的dom
      var editBtn=document.getElementsByTagName('a');
      var span=document.getElementsByTagName('span');
      var input=document.getElementsByTagName('input');
      var save=document.getElementsByClassName('save');
      var cancel=document.getElementsByClassName('cancel');
 //获取到当前操作
     for(var i=0;i<editBtn.length;i++){
          editBtn[i].index=i;
          span[i].index=i;
         input[i].index=i;
         save[i].index=i;
         cancel[i].index=i;
       
    editBtn[i].οnclick=function(){
    //当我们点击编辑的时候    
      input[this.index].value=span[this.index].innerHTML;
      this.parentNode.className='deit_li'
    
};
    save[i].οnclick=function(){
       if(input[this.index].innerText==''){
                alert('内容不能为空');
                  return  flase;   //当我们点击保存时候如果内容为空；弹出；停止
     
}
         span[this.index].innerText=input[this.index].value;
//如果不为空，获取到input框输入的值并赋值给span;
          this.parentNode.className=''  ；//清空name


}
cancel[i].οnclick=function(){
    this.parentNode.className=' ';
//当点击去取消时候，取消父节点的name；

}

    
     


     }



</script>                    

　　谁将是你的尘埃落定

转载于:https://www.cnblogs.com/yang656/p/9838559.html