兩種動態建立表格的方法

牛肉燒酒發表於2019-04-07

對於一個前端小白來講，節點的獲取是比較難理解的，下面將根據近期的學習，來實現輸入資料建立表格的效果。方法一使用了map，方法二是簡單理解的createElement。

兩種動態建立表格的方法

動態建立表格的方法-map

Map 物件儲存鍵值對。任何值(物件或者原始值) 都可以作為一個鍵或一個值。

​ 通過構建一個陣列來儲存輸入的資料，再將陣列中每個鍵值對遍歷，返回一個新的陣列；再用join將資料變成字串新增進表格。

​ 還使用了一個API：

insertAdjacentHTML() 將指定的文字解析為HTML或XML，並將結果節點插入到DOM樹中的指定位置。

form.addEventListener('submit', event => {
  event.preventDefault();
  var name = nameInput.value;
  var age = ageInput.value;
  var phone = phoneInput.value;
  var birth = birthInput.value;
  const arrNew = [{
    Name: name,
    Age: age,
    Phone: phone,
    Birth: birth
  }]
  //鍵值陣列
  console.log(arrNew);
  const newInf = arrNew.map(person => {
    if (person.Name != "" && person.Age != "" && person.Phone != "" && person.Birth != "") {
      return `<tr>
                <td>${person.Name}</td>
                <td>${person.Age}</td>
                <td>${person.Phone}</td>
                <td>${person.Birth}</td>
                <td><a href="jacascript:;" onclick="delTr(this)">刪除</a></td>
              </tr>`
   //返回一個新陣列
    } else {
      alert("新增失敗")
    }
  })
  const tabInf = newInf.join('');
  tbody.insertAdjacentHTML('beforeend', tabInf);
  form.reset();
})

delTr = (obj) => {
  var tr = obj.parentNode.parentNode;
  tbody.removeChild(tr);
}
複製程式碼

動態建立表格的方法-createElement

​ 這個方法簡單好理解，建立對應的單元格節點，將資料賦給對應單元格文字：

form.addEventListener('submit', function (event) {
  event.preventDefault();
  if (nameInput.value != "" && ageInput.value != "" && phoneInput.value != "" && birthInput.value != "") {
    var tr = document.createElement("tr");
    for (let i = 0; i < ths.length; i++) {
      var td = document.createElement("td");
      switch (i) {
        case 0: td.innerHTML = nameInput.value;   tr.appendChild(td);  break
        case 1: td.innerHTML = ageInput.value;    tr.appendChild(td);  break
        case 2: td.innerHTML = phoneInput.value;  tr.appendChild(td);  break
        case 3: td.innerHTML = birthInput.value;  tr.appendChild(td);  break
        case 4: td.innerHTML = "<a href='javascript:;' onclick='delTr(this)'>刪除</a>";  tr.appendChild(td); break
      }
    }
    tbody.appendChild(tr);
  } else {
    alert("儲存失敗！")
  }
  form.reset();
})
複製程式碼

​ form.reset();可以將表單中的資料重置，非常好用。

原始碼連結

相關文章