Блог

Главная - Вопросы по программированию - Транспонирование HTML-таблицы, содержащей значения массивов, с помощью JavaScript

Транспонирование HTML-таблицы, содержащей значения массивов, с помощью JavaScript

#javascript #html #css #html-table #transpose

Вопрос:

У меня есть таблица, которая выглядит так:

введите описание изображения здесь

Я хочу, чтобы в таблице было 2 столбца и несколько строк вместо 2 строк и нескольких столбцов. Я хочу, чтобы это выглядело так:

введите описание изображения здесь

В настоящее время таблица создается путем взятия значений, которые находятся внутри двух массивов, milestone и milestoneDate . Затем он добавляется в div с идентификатором meilensteine . В этом примере массив 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);

Я немного поэкспериментировал, но не смог заставить это работать.

Ответ №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>
Метки: , ,