添加删除任意栏

最新推荐文章于 2025-05-08 12:54:29 发布

zsh1783154183@gmail

最新推荐文章于 2025-05-08 12:54:29 发布

阅读量617

点赞数

分类专栏： web 基础文章标签： html javascript css

本文链接：https://blog.youkuaiyun.com/m0_49731762/article/details/118392163

版权

web 基础专栏收录该内容

1 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="http://10.0.0.27:9195/IphoneIntegralMG/static/js/jquery.min.js"></script>
  <title>Document</title>
  <style>
    #shade{
      position: fixed;
      width: 100%;
      height: 100vh;
      background-color: rgba(44, 42, 42, 0.514);
      top:0;
      left:0;
    }
    #test{
      background-color: rosybrown;
      height: 100vh;
    }
    body{
      padding: 0;
      margin: 0;
    }
    #shade_window{
      position: absolute;
      left: 0;
      top: 20%;
      right: 0;
      margin: auto;
      background-color: white;
      width: 800px;
    }
    #title{
      width:100%;
      background-color: rgb(157, 157, 230);
      text-align: center;
      line-height: 50px;
      font-size: 18px;
      font-weight: 600;
    }
    .a1{
      display: flex;
      margin-top: 10px;
      justify-content:space-around;

    }
    input{
      border: 1px solid ;
      
    }
    input:focus{
      outline:none;
      border-radius: 2PX;
      border: 1px solid #126AE4	
      
    }
    #floot{
      height: 50px;
      border-top: 1px solid;
      margin-top: 10px;
      text-align: center;
    }
    .btn{
      display :inline-block;
      text-align: center;
      line-height: 40px;
      width: 100px;
      height:40px;
      background-color: cornflowerblue;
      border-radius: 18px;
      border: 0;
      box-shadow: 0px 0px 2px darkblue;
      margin-top: 5px;
      text-decoration: none;
      color: black;
    }
    .btn:active{
      border-radius: 20px;
      font-size: 16px;
    }
    .btn:hover{
      cursor:pointer 
    }
    #pop{
      position: fixed;
      margin: auto;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background-color: rgba(53, 49, 49, 0);
      z-index: 98999;
      height: 50px;
      text-align: center;
      display: none;
     
    }
    #pop span{
      background-color: rgba(19, 17, 17, 0.418);
      line-height: 50px;
      font-size: 20px;
      height: 50px;
      display: inline-block;
      padding-left: 20px;
      padding-right: 20px;
    }
    .small_btn{
      background-color: cornflowerblue;
    }
    .small_btn:hover{
      cursor: pointer;
    }
    .small_btn:active{
      border-radius: 10px;
    }
  </style>
</head>
<body>
  <div id="test"></div>
  <div id="shade">
      <div id="shade_window">
          <div id="title">温馨提示</div>
          <div id="content">
            <div class="a1">
              <div><span>省份:&nbsp;&nbsp;</span><input type="text" id="b1" ></div>
              <div><span>城镇:&nbsp;&nbsp;</span><input type="text" id="b2" ></div>
              <div><span>乡村:&nbsp;&nbsp;</span><input type="text" id="b3" ></div>
              <div><a class="small_btn" >删除</a></div>
            </div>
      
      </div>
      <div id="floot">
        <a class="btn" href="javascript:comfim()">确认</a>
        <a class="btn" style="margin-left: 20px;" href="javascript:addclick()">添加</a>
      </div>
  </div>
  </div>
  <div id="pop">
        <span>nihaoa</span>
  </div>
  <script>
    $.alert = function(str){
      $("#pop span").html(str);
      $("#pop").show();
      setTimeout(() => {
        $("#pop").hide();
      }, 1500);
    }
    $(document).ready(function(){
      $(".small_btn").bind("click",function(){
        console.log($(this))
      })
    })
   function addclick(){
    let htl = `<div class="a1">
              <div><span>省份:&nbsp;&nbsp;</span><input type="text" id="b1" ></div>
              <div><span>城镇:&nbsp;&nbsp;</span><input type="text" id="b2" ></div>
              <div><span>乡村:&nbsp;&nbsp;</span><input type="text" id="b3" ></div>
              <div><a class="small_btn" >删除</a></div>
            </div>`;
    $("#content").append(htl);        
    $(".small_btn").bind("click",function(){
        $(this).parent().parent().remove();
        var a = $("#content div.a1").length;
        if(!a){
          $.alert("元素删除完毕，窗口关闭");
        }
      })
   }
   function comfim(){
      let rows = $("#content div.a1");
      let obj=[];
      for(let i = 0 ; i < rows.length ; i++){
        let som = rows[i];
        let s = $(som).find("#b1").val();
        let x = $(som).find("#b2").val();
        let c = $(som).find("#b3").val();
        obj.push({
          "省份":s,
          "市":x,
          "村庄":c
        })
      }
      console.log(obj)
   }
  </script>
</body>
</html>

添加删除 任意栏

添加删除任意栏