模拟买家删除信息

//作答时时间不够，没有想到序号ID重排reStart()，遗憾……
<!DOCTYPE html>

<html>
<head>
  <meta charset="utf-8">
  <!--code here-->
  <title>demo</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    .head, li div {
      display: inline-block;
      width: 70px;
      text-align: center;
    }

    li .id, li .sex, .id, .sex {
      width: 15px;
    }

    li .name, .name {
      width: 40px;
    }

    li .tel, .tel {
      width: 90px;
    }

    li .del, .del {
      width: 15px;
    }

    ul {
      list-style: none;
    }

    .user-delete {
      cursor: pointer;
    }

  </style>
</head>

<body>
  <div id="J_container">
    <div class="record-head">
      <div class="head id">序号</div><div class="head name">姓名</div><div class="head sex">性别</div><div class="head tel">电话号码</div><div class="head province">省份</div><div class="head">操作</div>
    </div>
    <ul id="J_List">
      <li>
        <div class="id">1</div>
        <div class="name">张三</div>
        <div class="sex">男</div>
        <div class="tel">13788888888</div>
        <div class="province">浙江</div>
        <div class="user-delete">删除</div>
      </li>
      <li><div class="id">2</div><div class="name">李四</div><div class="sex">女</div><div class="tel">13788887777</div><div class="province">四川</div><div class="user-delete">删除</div></li>
      <li><div class="id">3</div><div class="name">王二</div><div class="sex">男</div><div class="tel">13788889999</div><div class="province">广东</div><div class="user-delete">删除</div></li>
    </ul>
  </div>

<script>
// 此处也可换成ES6的写法
// function Contact(){
//     this.init();
// }

window.onload = function init(){
    var idx;
    var del_Btns = document.getElementsByClassName("user-delete");
    changeDelBtn(del_Btns);
}

function changeDelBtn(del_Btns){
  for(var i = 0 ; i <= del_Btns.length-1 ; i++){
     del_Btns[i].onclick=function(){
          idx = (this.parentNode.children[0].innerHTML)

          var delNode = document.getElementsByClassName("user-delete")[idx-1];
          var delNodeParent = document.getElementById("J_List");

          delNodeParent.getElementsByTagName("li")[idx-1].remove()
          reStartNo();
          idx = 0;
     }
  }
}

function reStartNo(){
  var myLi = document.getElementById("J_List").getElementsByTagName("li");
  for(var i = 0 ; i <= myLi.length-1; i++){
    myLi[i].getElementsByClassName("id")[0].innerHTML = i+1
  }
}

</script>
</body>
</html>
20170814阿里测验题

模拟买家删除信息

猜你喜欢
