对于一个前端小白来讲，节点的获取是比较难理解的，下面将根据近期的学习，来实现输入数据创建表格的效果。方法一使用了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();
})
复制代码