使用循环在 Javascript 中创建 <tr>答案

【问题标题】：Create <tr> in Javascript using loops使用循环在 Javascript 中创建 <tr>
【发布时间】：2022-11-16 21:53:41
【问题描述】：

我正在尝试创建一个表格，其中每个单元格都包含一个字母和一个数字。查看目标表的图像：

这是我正在使用的 HTML 代码。这是一个简单的按钮，单击后应调用populateTable() 函数，然后在页面上显示表格。

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <title>Document</title>
    <style>
     table { border-collapse: collapse; margin: 1em 0; }
     td { border: 1px solid black; padding: 0.3em; }
    </style>
    </head>
    <body>
    
    <h2>Table</h2>
    <table id="the-table"></table>
    <button type="button" onclick="populateTable();">Populate table</button> 
    
    <script src="table.js"></script>
    </body>
</html>

但这里的主要问题是我的 JS 代码。

function populateTable(){
    letters = ["a", "b", "c", "d", "e"]
    numbers = ["1", "2", "3", "4", "5"]
    
    for(let i = 0; i < numbers.length; i++){
        document.getElementById("the-table").innerHTML += "<tr>"
        for(let j = 0; j < letters.length; j++){
            document.getElementById("the-table").innerHTML += "<td>" + letters[j] + numbers[i] + "</td>"
        }
        document.getElementById("the-table").innerHTML += "</tr>"
    }
}

内循环退出后如何创建新的 <tr> ？

当前代码的结果类似于this

请帮忙:'D

我试着四处走动

document.getElementById("the-table").innerHTML += "<tr>"

和

document.getElementById("the-table").innerHTML += "</tr>"

但无济于事。我试着在网上寻找答案，但没有找到对我的案例有用的东西。像 appendChild 这样的东西并不是我真正想要的。我只想知道为什么上面提到的这些行（“<tr>”）不起作用，解决这个问题的最简单方法是什么？

【问题讨论】：

“抱歉问了一个愚蠢的问题，我是 JavaScript 的新手”。没有愚蠢的问题。只有写得不好的和重复的。你的其实很好。你表现出一些努力。祝你学习 JavaScript 愉快 :)

标签： javascript html arrays html-table

【解决方案1】：

您可以使用 creatElement 而不是编写文本。 InnerHtml 可能是一个有问题的安全明智者。如果您好奇，请查看 XSS。

const letters = ["a", "b", "c", "d", "e"]
const numbers = ["1", "2", "3", "4", "5"]

const table = document.getElementById("the-table");

function populateTable() {
  for (let i = 0; i < numbers.length; i++) {
    const row = document.createElement("tr");
    for (let j = 0; j < letters.length; j++) {
      const column = document.createElement("td");
      column.textContent = letters[j] + numbers[i];
      row.appendChild(column);
    }
    table.appendChild(row);
  }
}

table {
  border-collapse: collapse;
  margin: 1em 0;
}

td {
  border: 1px solid black;
  padding: 0.3em;
}

<h2>Table</h2>
<table id="the-table"></table>
<button type="button" onclick="populateTable();">Populate table</button>

【讨论】：

【解决方案2】：

这里的问题是，每次您在表格元素上调用 += 时，它都会创建一个新的 tbody。所以所有的 TD 都会出现在新的一行上。您需要创建一个变量并创建整个内部表结构，然后像这样将其添加到您的表中。如果您在运行代码后检查元素，您可以看到所有的 tbodies。我希望这有帮助。

function populateTable(){
    letters = ["a", "b", "c", "d", "e"]
    numbers = ["1", "2", "3", "4", "5"]
    innerTable = '';
    
    for(let i = 0; i < numbers.length; i++){
        innerTable += "<tr>"
        
        for(let j = 0; j < letters.length; j++){
            innerTable += "<td>" + letters[j] + numbers[i] + "</td>"
        }
        
        innerTable += "</tr>"
    }
    
    document.getElementById("the-table").innerHTML += innerTable;
}

【讨论】：