zoukankan      html  css  js  c++  java
  • 原生js修改文本内容

    关于修改文本的内容,有好多不同的写法,今天实现一个简单的的案例就是点击“编辑”按钮,文本内容可以保存。看下图:

    这个例子想要实现的效果就是点击编辑,出现文本框,然后可以更改内容,关键就是在实际项目中可能会遇到有多行这样的内容,那么现在就只能用到传参来解决了,只要实现一个剩下的就都好说了,来看看代码:

    <ul id="list">
           <li>
               <strong></strong>
               <input type="text" value="">
               <i>编辑</i>
               <span>保存</span>
           </li>
           <li>
               <strong></strong>
               <input type="text" value="">
               <i>编辑</i>
               <span>保存</span>
           </li>
           <li>
               <strong></strong>
               <input type="text" value="">
               <i>编辑</i>
               <span>保存</span>
           </li>
           <li>
               <strong></strong>
               <input type="text" value="">
               <i>编辑</i>
               <span>保存</span>
           </li>
           <li>
               <strong></strong>
               <input type="text" value="">
               <i>编辑</i>
               <span>保存</span>
           </li>
       </ul>

    布局很简单,接下来看js实现:

    <script>
        window.onload=function(){
            var oUl=document.getElementById("list");
            var aLi=oUl.getElementsByTagName("li");
            for(var i=0;i<aLi.length;i++){
                fn(aLi[i]);
            }
            //先完成其中一个li的效果
            function fn(aLi){//传参来实现每个li的效果
                var oStxt=aLi.getElementsByTagName("strong")[0];
                var oInput=aLi.getElementsByTagName("input")[0];
                var oBj=aLi.getElementsByTagName("i")[0];
                var oBc=aLi.getElementsByTagName("span")[0];
                //初始化的情况下,所展示的内容
                oInput.style="display:none";
                oStxt.innerHTML="可以更改我的内容";
    
                oBj.onclick=function(){//点击编辑按钮
                    oStxt.style="display:none";
                    oInput.value=oStxt.innerHTML;//将input的值赋值到strong里
                    oInput.style="display:block";
                };
                oBc.onclick=function(){//点击保存按钮
                    oStxt.style="display:block";
                    oInput.style="display:none";
                    oStxt.innerHTML=oInput.value;
                }
            }
        }
    
    </script>

    这是效果图,可以更改input里的内容(可以忽略样式)

    好了,今天就实现一个小的例子来联系传参,希望对大家有用!

  • 相关阅读:
    sp2010 升级sp2013 用户无法打开网站
    powerviot install in sharepoint 2013
    can not connect cube in performancce dashboard
    westrac server security configure user info
    添加报表服务在多服务器场
    sharepoint 2013 office web app 2013 文档在线浏览 IE11 浏览器不兼容解决方法
    delete job definition
    目前付款申请单内网打开慢的问题
    item style edit in sharepoint 2013
    Could not load file or assembly '$SharePoint.Project.AssemblyFullName$'
  • 原文地址:https://www.cnblogs.com/web001/p/8001406.html
Copyright © 2011-2022 走看看