如何让动态表格行的序号与数组中对应对象的序号保持一致

现有代码问题梳理 #

1. 全局只声明了一个user对象，每次push到users数组的都是同一个引用，最终数组所有元素都会被覆盖为最后一次输入的内容
2. 每次触发函数都会遍历整个users数组，且遍历过程中每次都新建一个表格插入页面，就会出现重复渲染所有历史数据的问题，行数自然等于数组总长度
3. 没有单独做序号列，也没有在渲染前清空旧的表格内容

修改后可运行代码 #

<html>
<head>
  <style>
    table,
    th,
    td,
    tr {
      border: 1px solid black;
      border-collapse: collapse;
    }
    th, td {
      padding: 4px 8px;
    }
  </style>
</head>
<body>
  <form>
    <input id="firstname" type="text" placeholder="firstname"><br>
    <input id="lastname" type="text" placeholder="lastname"><br>
  </form>
  <button onclick="myFunc()">calc</button>
  <div id="tableContainer"></div>
</body>
<script>
  let properties = [
    'firstname',
    'lastname',
  ]
  let form = document.querySelector('form')
  let tableContainer = document.querySelector('#tableContainer')
  let users = []

  function myFunc() {
    // 每次新建独立的user对象，避免引用重复
    let user = {}
    for (let i = 0; i < properties.length; i++) {
      let prop = properties[i]
      user[prop] = form.elements[prop].value
    }
    users.push(user)
    // 先清空容器里之前的旧内容
    tableContainer.innerHTML = ''
    // 全局只建一个表格
    let table = document.createElement('table')
    // 可选：加表头，不需要可以删掉这部分
    let headerTr = document.createElement('tr')
    let thSeq = document.createElement('th')
    thSeq.innerText = '序号'
    headerTr.appendChild(thSeq)
    for (let i = 0; i < properties.length; i++) {
      let th = document.createElement('th')
      th.innerText = properties[i]
      headerTr.appendChild(th)
    }
    table.appendChild(headerTr)

    // 用带索引的普通for循环遍历，i就是数组元素的原生序号
    for (let i = 0; i < users.length; i++) {
      let currentUser = users[i]
      let tr = document.createElement('tr')
      // 插入序号列，要和数组下标完全一致就写i，要日常从1开始就写i+1
      let tdSeq = document.createElement('td')
      tdSeq.innerText = i + 1
      tr.appendChild(tdSeq)
      // 渲染用户字段
      for (let j = 0; j < properties.length; j++) {
        let prop = properties[j]
        let td = document.createElement('td')
        td.innerText = currentUser[prop]
        tr.appendChild(td)
      }
      table.appendChild(tr)
    }
    tableContainer.appendChild(table)
    form.reset()
  }
</script>
</html>

核心实现逻辑说明 #

• 用最基础的带索引for循环遍历users数组，循环变量i就是当前对象在数组中的原生下标，直接对应你要的序号
• 每次渲染前先清空容器的旧内容，避免历史数据重复显示
• 所有行都挂载到同一个table下，不会出现多个零散表格的问题
• 没有使用任何高级语法和第三方库，完全符合课程作业要求

内容的提问来源于stack exchange，提问作者Arthur Berman