zoukankan      html  css  js  c++  java
  • JavaScript Dom操作-增删改节点2

    html

    <body>
    
    <div id="div1"class="div1 none" style="display: none"></div>
    <div id="div2"  class="div2 none" style="display: none">
        <input type="text" name="bookName" id="bookName"  placeholder=" 书籍名称:"/>
        <input type="text" name="bookPrice" id="bookPrice"  value=" ¥ 99" />
        <input class="btn" type="button" value="增加书籍"/>
    </div>
    
    <table border="1" cellspacing="0" cellpadding="10" >
        <thead>
    
        <tr>
            <th>书籍</th>
            <th>价格</th>
            <th  colspan="2">操作 |  <input id="addBtnShow" class="btn" type="button" value="增加书籍"/> </th>
        </tr>
        </thead>
        <tbody id="bookCon">
        <tr>
            <td id="tr1">第八条猎狗</td>
            <td>¥22</td>
            <td  class="btn" >删除</td>
            <td  class="btn" >修改</td>
        </tr>
        <tr>
            <td>不抱怨的世界</td>
            <td>¥22</td>
            <td  class="btn" >删除</td>
            <td  class="btn" >修改</td>
        </tr>
        </tbody>
    </table>
    
    </body>
    

      

    样式

      .div1{
            position: absolute;
             100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
        }
        .div2{
            position: absolute;
            left: 50%;
            top: 50%;
            margin-top: -75px;
            margin-left:-170px;
             300px;
            height:110px;
            padding: 20px;
         }
        .div2 input{
             100%;
            height: 30px;
            margin: 2px 0;}
    

      JavaScript

      //新增
        var addBtnShow = document.getElementById("addBtnShow");
        var oDiv1 = document.getElementById("div1");
        var oDiv2=  document.getElementById("div2");
        addBtnShow.onclick = function(){
            if(  oDiv1.style.display=="none"){
                oDiv1.style.display="block";
                oDiv2.style.display="block";
            }
            
            var arrInput  =oDiv2.getElementsByTagName("input");
            arrInput[arrInput.length-1].onclick =function(){
                var s1=  arrInput[0].value;
                var s2=  arrInput[1].value;
                oDiv1.style.display="none";
                oDiv2.style.display="none";
                add(s1,s2);
            };
    
        };
      
      //删除
        var bookCon =  document.getElementsByTagName("tbody")[0] ;
        document.getElementsByTagName("tbody")[0].onclick  = function(){
            var arrtr = bookCon.getElementsByTagName( "tr") ;
            var index = 0;
            for( index=0; index<arrtr.length ;index++) {
                var childrenTd = arrtr[index].children;
                //删除
                childrenTd[childrenTd.length - 2].onclick = function () {
                    del(this.parentNode.parentNode, this.parentNode);
                };
            }
    
            //修改
            for( index=0; index<arrtr.length ;index++){
                var childrenTd = arrtr[index].children;
                childrenTd[ childrenTd.length -1].onclick =  function(){
                    var objTr = this.parentNode;
                    if(  oDiv1.style.display=="none"){
                        oDiv1.style.display="block";
                        oDiv2.style.display="block";
                    }
                    //修改
                    var arrInput  =oDiv2.getElementsByTagName("input");
                    arrInput[0].value =childrenTd[0].innerHTML ;
                    arrInput[1].value =childrenTd[1].innerHTML ;
                    arrInput[arrInput.length-1].value ="确定修改";
                    arrInput[arrInput.length-1].onclick =function(){
                        var s1=  arrInput[0].value;
                        var s2=  arrInput[1].value;
                        oDiv1.style.display="none";
                        oDiv2.style.display="none";
                        set(objTr,s1,s2);
                    };
    
                };
            }
    
        };
      
    
    
        //add    增加一条,放在倒数第二的位置即放在length-1的前面
        function add(s1,s2){
            var newTr =document.createElement("tr");
            newTr.innerHTML="  <td>"+s1+"</td>   <td>"+s2+"</td> " +'<td  class="btn" >删除</td>  <td  class="btn" >修改</td>';
            bookCon.insertBefore( newTr,  bookCon.children[bookCon.children.length-1] )
        }
    
        //del 删除最后一个即删除tr下标为length-1
        function  del(p,obj){
            if( p && obj )
                p.removeChild(  obj  )
        }
    
        //修改
        function   set(objTr,s1,s2){
            var newTr =document.createElement("tr");
            newTr.innerHTML="  <td>"+s1+"</td>   <td>"+s2+"</td> " +'<td  class="btn" >删除</td>  <td  class="btn" >修改</td>';
            bookCon.replaceChild( newTr,objTr )
        }
    

      

  • 相关阅读:
    希望走过的路成为未来的基石
    第三次个人作业--用例图设计
    第二次结对作业
    第一次结对作业
    第二次个人编程作业
    第一次个人编程作业(更新至2020.02.07)
    Springboot vue 前后分离 跨域 Activiti6 工作流 集成代码生成器 shiro权限
    springcloud 项目源码 微服务 分布式 Activiti6 工作流 vue.js html 跨域 前后分离
    spring cloud springboot 框架源码 activiti工作流 前后分离 集成代码生成器
    java代码生成器 快速开发平台 二次开发 外包项目利器 springmvc SSM后台框架源码
  • 原文地址:https://www.cnblogs.com/July-/p/5777635.html
Copyright © 2011-2022 走看看