转置 HTML table 包含具有 JavaScript 的数组值

Question

我有一个 table 看起来像这样：

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

目前，table 是通过获取两个数组 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);

我做了一些实验，但无法正常工作。

Answer 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。将此模板附加到 table 中并查看其实际效果：

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>

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

Answer 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>

转置 HTML table 包含具有 JavaScript 的数组值

Transposing HTML table containing values of arrays with JavaScript

html

javascript

css

transpose

html-table

1。首先，使用 javascript:

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

3。将此模板附加到 table 中并查看其实际效果：

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