如何使动态table行的序号等于数组中对象的序号？

Question

我正在尝试创建一个 table，其中每一行都是数组中的一个对象。从逻辑上讲它是有效的，但它给我的 table 中的行数等于每次执行该函数时数组中的对象数。相反，我需要行的序列号等于数组中对象的序列号。我怎样才能做到这一点？ (* 初学者的 class 项目。不能使用高级 js/libraries)。

<html>

<head>
  <style>
    table,
    th,
    td,
    tr {
      border: 1px solid black;
    }
  </style>
</head>

<body>
  <form>
    <input id="firstname" type="text" placeholder="firstname"></input><br>
    <input id="lastname" type="text" placeholder="lastname"></input><br>
  </form>
  <button onclick="myFunc()">calc</button>
  <div></div>
</body>
<script>
  let properties = [
    'firstname',
    'lastname',
  ]
  let form = document.querySelector('form')
  let div = document.querySelector('div')
  let user = {}
  let users = []

  function myFunc() {
    users.push(user)
    for (let prop of properties) {
      user[prop] = form.elements[prop].value
    }
    for (let user of users) {
      //HERE is my problem. do i need to create separate function to calculate nubers and another one to render the table? 
      let tr = document.createElement('tr')
      for (let key in user) {
        let td = document.createElement('td')
        td.innerHTML = user[key]
        tr.appendChild(td)
      }
      let table = document.createElement('table')
      table.appendChild(tr)
      div.appendChild(table)
      form.reset()
      console.log(users.length)
    }
  }
</script>

</html>

Answer 1

我不确定我是否理解正确，但我认为你非常接近。问题是，目前的情况是，您永远不会从对象中删除项目，您只会添加。所以你不必从头开始渲染整个 table 因此你不需要 for 循环。

<html>

<head>
  <style>
    table,
    th,
    td,
    tr {
      border: 1px solid black;
    }
  </style>
</head>

<body>
  <form>
    <input
      id="firstname"
      type="text"
      placeholder="firstname"></input><br>
    <input
      id="lastname"
      type="text"
      placeholder="lastname"></input><br>
  </form>
  <button
    onclick="myFunc()">calc</button>
  <div>
  </div>
</body>
<script>
  let properties = [
    'firstname',
    'lastname',
  ]
  let form = document.querySelector('form')
  let div = document.querySelector('div')
  let user = {}
  let users = []

  function myFunc() {
    users.push(user)
    for (let prop of properties) {
      user[prop] = form.elements[prop].value
    }
    let tr = document.createElement('tr')
    for (let key in user) {
      let td = document.createElement('td')
      td.innerHTML = user[key]
      tr.appendChild(td)
    }
    let table = document.querySelector("table")
    if (table === null) {
      table = document.createElement('table');
    }
    table.appendChild(tr)
    div.appendChild(table)
    form.reset()
    console.log(users.length);
  }
</script>

</html>

如何使动态table行的序号等于数组中对象的序号？

How can I make the serial number of the dynamic table row to be equal to the serial number of the object in the array?

html

javascript

arrays

html-table

dynamic