0
277
VistasTransposición de una tabla HTML que contiene valores de matrices con JavaScript
Tengo una tabla que se ve así:
Quiero que la tabla tenga 2 columnas y varias filas en lugar de tener 2 filas y varias columnas. Quiero que se vea así en su lugar:
Actualmente, la tabla se crea tomando valores que están dentro de dos matrices, milestone e milestoneDate . Luego, se agrega a un div con el id meilensteine . En este ejemplo, el milestone de matriz consta de 1. MS: Beginn,2. MS: Start,3. MS: Meilensteine,4. MS: Testung mientras que la fecha del milestoneDate consiste en 06.09.2021,07.09.2021,08.09.2021,09.09.2021 , 07.09.2021, 08.09.2021, 09.09.2021
Esta es la parte HTML:
<div> <div> <strong><u>Meilensteine</u></strong> </div> <p></p> <div id="meilensteine"> </div> <p></p> </div>Este es el 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);Experimenté un poco, pero no pude hacerlo funcionar.
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
¡Puedes lograr esto fácilmente con un truco específico!
1. Primero, haga una plantilla usando literales de plantilla en javascript:
const tableRowTemplate = `<tr><td>Stuff for column 1</td><td>stuff for column 2</td></tr>`;2. Tome las dos matrices y agregue dinámicamente contenido a la plantilla:
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. Agregue esta plantilla dentro de la tabla y véala en acción:
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>Espero que esto ayude a resolver su consulta.
·
Juan Pablo Isaza
Denunciar
0
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>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta