阿里秋招內推編程題

時間 2019-11-07

原文原文鏈接

2017.8參加了阿里的內推。面試前被要求作了一道編程題，如今分享一下。html

題目要求：
巴拉巴拉具體忘記了，大概就是一個列表，每一個列表後面有個刪除按鈕，點擊相應的刪除按鈕就能夠刪除相應的列表的其中一行，而且要以面向對象的方式實現。題目知識點：閉包，構造函數與原型。下面是個人代碼：面試

<!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();
  }
  // your code here
  Contact.prototype.init = function () {
     btn = document.getElementsByClassName('user-delete');
     li = document.getElementsByTagName('li');
    for (let i = 0; i < btn.length; i++) {
      li[i].onclick = function () {
        this.remove();
      }
    }
  };
  new Contact();
</script>
</body>
</html>

思考：提交後發現本身的代碼有一點問題。題目要求的是點擊相應的刪除按鈕刪除列表的相應行。而我是點擊整一個<li></li>的任何一處均可以刪除。後來思考了一下，將for循環內的代碼改成btn[i].onclick = function(){document.getElementById('J_List').removeChild('li[i]')}。可是仍是不行，修改以後發現刪除一行以後，dom的序號就變了，與以前取dom產生的數組序號不對應了。暫時沒別的想法，有會的同窗能夠回覆一下，謝謝！編程