【问题标题】：Transposing HTML table containing values of arrays with JavaScript使用 JavaScript 转置包含数组值的 HTML 表
【发布时间】：2021-11-21 22:01:40
【问题描述】：

我有一个如下所示的表格：

我希望表格有 2 列和多行，而不是 2 行和多列。我希望它看起来像这样：

目前，该表是通过采用两个数组内部的值创建的，milestone 和 milestoneDate。然后，将其附加到 id 为 meilensteine 的 div。在此示例中，数组milestone 由1. MS: Beginn,2. MS: Start,3. MS: Meilensteine,4. MS: Testung 组成，而milestoneDate 由06.09.2021,07.09.2021,08.09.2021,09.09.2021 组成

这是 HTML 部分：

<div>
    <div>
        <strong><u>Meilensteine</u></strong>
    </div>

    <p></p>
    <div id="meilensteine">
    </div>

    <p></p>
</div>

这是 JavaScript：

var cycleArr = [milestone, milestoneDate];

var strTable = "";
if (cycleArr.length != "0"){ 
    for(var i = 0; i < cycleArr.length; i++) {
        strTable += "<tr>"
        for(var j = 0; j < cycleArr[i].length; j++) {
            strTable += "<td>";
            strTable += cycleArr[i][j];
            strTable += "</td>";
        }
        strTable += "</tr>";
    }
} else {
    strTable = "Es gibt derzeit keine Meilensteine. Definieren Sie gerne die Meilensteine für das Projekt hier.";
}
$('#meilensteine').append(strTable);

我尝试了一些，但无法让它发挥作用。

【问题讨论】：

标签： javascript html css html-table transpose

【解决方案1】：

您可以通过特定的技巧轻松实现这一目标！

1。首先，在 javascript 中使用模板文字制作模板：

const tableRowTemplate = `<tr><td>Stuff for column 1</td><td>stuff for column 2</td></tr>`;

2。取两个数组，动态添加内容到模板中：

const milestone = ['1. MS: Beginn','2. MS: Start','3. MS: Meilensteine','4. MS: Testung']
const milestoneDate = ['06.09.2021','07.09.2021','08.09.2021','09.09.2021']
for(let i = 0; i< milestone.length; i++){
    const tableRowTemplate = `<tr><td>${milestone[i]}</td><td>${milestoneDate[i]}</td></tr>`;
}

3。将此模板附加到表格中并查看它的实际效果：

const milestone = ['1. MS: Beginn', '2. MS: Start', '3. MS: Meilensteine', '4. MS: Testung']
const milestoneDate = ['06.09.2021', '07.09.2021', '08.09.2021', '09.09.2021']
for (let i = 0; i < milestone.length; i++) {
  const tableRowTemplate = `<tr><td>${milestone[i]}</td><td>${milestoneDate[i]}</td></tr>`;
  document.getElementById("table").innerHTML += tableRowTemplate
}

<div>
  <div>
    <strong><u>Meilensteine</u></strong>
  </div>

  <p></p>
  <div id="meilensteine">
  </div>

  <p></p>
  <table id="table"></table>
</div>

我希望这有助于解决您的问题。

【讨论】：

【解决方案2】：

const milestones = [ "1. MS: Beginn", "2. MS: Start", "3. MS: Meilensteine", "4. MS: Testung" ];
const milestoneDates = [ "06.09.2021", "07.09.2021", "08.09.2021", "09.09.2021" ];

let tdms = "", tdmsd = "";
for (let i=0; i<milestones.length; i++) {
  tdms += `<td>${milestones[i]}</td>`;
  tdmsd += `<td>${milestoneDates[i]}</td>`;  
}
document.getElementById("msrow").innerHTML = tdms;
document.getElementById("daterow").innerHTML = tdmsd;


let tr = "";
for (let i=0; i<milestones.length; i++) {
  tr += `<tr><td>${milestones[i]}</td><td>${milestoneDates[i]}</td></tr>`;  
}
document.getElementById("twocols").innerHTML = tr;

<h3>2 rows</h3>
<table id="tworows" border="1">
 <tr id="msrow"></tr>
 <tr id="daterow"></tr>
</table>

<h3>2 columns</h3>
<table id="twocols" border="1"></table>

【讨论】：