I have a unique table structure that I need help with:
My current table has 2 rows and multiple columns, but I want to change it to have 2 columns and multiple rows like this:
To create the table, I am using two arrays named milestone and milestoneDate. The values from these arrays are then appended to a div with the id meilensteine. For example, milestone contains: "1. MS: Beginn, 2. MS: Start, 3. MS: Meilensteine, 4. MS: Testung" while milestoneDate contains: "06.09.2021, 07.09.2021, 08.09.2021, 09.09.2021"
Here is the HTML snippet:
<div>
<div>
<strong><u>Meilensteine</u></strong>
</div>
<p></p>
<div id="meilensteine">
</div>
<p></p>
</div>
And here is the JavaScript code:
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);
Despite my attempts, I haven't been able to make it work as desired.