Issue
I have a table which looks like this:
I want the table to have 2 columns and multiple rows instead of having 2 rows and multiple columns. I want it to look like this instead:
Currently, the table is created by taking values which are inside of two arrays, milestone
and milestoneDate
. Then, it is appended to a div with the id meilensteine
. In this example, the array milestone
consists of 1. MS: Beginn,2. MS: Start,3. MS: Meilensteine,4. MS: Testung
while milestoneDate
consists of 06.09.2021,07.09.2021,08.09.2021,09.09.2021
This is the HTML part:
<div>
<div>
<strong><u>Meilensteine</u></strong>
</div>
<p></p>
<div id="meilensteine">
</div>
<p></p>
</div>
This is the 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);
I experimented a bit, but couldn't get it to work.
Solution
You can easily achieve this with a specific trick!
1. First, make a template using template literals in javascript:
const tableRowTemplate = `<tr><td>Stuff for column 1</td><td>stuff for column 2</td></tr>`;
2. Take the two arrays and dynamically add content to the template:
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. Append this template inside the table and see it in action:
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>
I hope this helps to solve your query.
Answered By - Code Fingers
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.