用js创建一个table

Question

好的，我对这些东西很陌生。我以为我的 DOM 感觉是对的，但我的代码不工作。任务是创建一个 table 之类的这个

这是我做的作品。您能帮我指出我犯的错误或代码中缺少的部分吗？非常感谢您的帮助。

const tableValues = new Array(10).fill(false).map((x, i) => {
  return new Array(10).fill(1).map((y, i2) => {
    return (i + 1) * i2
  })
})

document.addEventListener('DOMContentLoaded', tableCreate, false);

function tableCreate() {
  const table = document.getElementById("table");
  tableValues.forEach((row) => {
    const row = document.createElement("tr")
    row.forEach(cell => {
        const cell = document.createElement("td");
        cell.innerHTML = cellText;
        cell.appendChild(cellText)
      }
      row.appendChild(cell))
  })
  table.appendChild(body)
}

<table>
  <tbody id="table"></tbody>
</table>

Answer 1

我已经修复了你的脚本，没有对代码做太多改动。研究它并找出问题所在

基本上，您在两个循环之外都有 appendChild。您还在单元格上使用了两次 appendChild - 您可以在值上使用 createTextNode 以在 cellcontent

上使用 appendChild

const tableValues = new Array(10).fill(false).map((x, i) => {
  return new Array(10).fill(1).map((y, i2) => {
    return (i + 1) * i2
  })
})

document.addEventListener('DOMContentLoaded', tableCreate, false);

function tableCreate() {
  const table = document.getElementById("table");
  tableValues.forEach(values => {
    const row = document.createElement("tr")
    values.forEach(value => {
      const cell = document.createElement("td");
      cell.innerHTML = value;
      //cell.appendChild(cellText)
      row.appendChild(cell)
    })
    table.appendChild(row)
  })
}

<table>
  <tbody id="table"></tbody>
</table>

这是一个较短的版本

const tableValues = new Array(10).fill(false).map((x, i) => new Array(10).fill(1).map((y, i2) => (i + 1) * i2))


const tableCreate = () => document.getElementById("table")
  .innerHTML = tableValues
    .map(values => `<tr>
      ${values
        .map(value => `<td>${value}</td>`).join('')} 
    </tr>`).join('');


document.addEventListener('DOMContentLoaded', tableCreate);

<table>
  <tbody id="table"></tbody>
</table>

用js创建一个table

Creating a table with js

html

javascript

arrays

dom