Как я могу динамически добавить столбец таблицы в JavaScript?

Question

У меня есть два массива, и мне нужно записать данные из обоих столбцов таблицы. На данный момент я могу правильно записывать данные только из первого массива, и когда я хочу добавить данные второго массива, они добавляются в строки.

orderGelen и userNameArr - мои массивы. Здесь вы можете увидеть мой код:

for(let data of orderGelen){ 
   dataHtmlIds += `<tr><td>${data}</td>`;
}

for(let usr of userNameArr){ 
   dataHtmlUsr += `<td>${usr}</td></tr>`;

}

dataHtml = dataHtmlIds + dataHtmlUsr;
console.log(dataHtml);

И здесь я пишу это в таблицу:

function tableConfig() { 

    tableBody.innerHTML = dataHtml;
}

Как я могу сделать второй столбец userNameArr data?

Answer 1

Попробуйте поместить два массива в один массив, как это

        const all = orderGelen.map((item, index) => ({ id: item, username: userNameArr[index] }));
        let html = '<table>';
        for (let row of all) {
            html += `<tr><td>${row.id}</td><td>${row.username}</td></tr>`;
        }
        html+='</table>'

        console.log(html);

Answer 2

вы можете сделать что-то вроде

var dataHtml = "";
  for (
    let i = 0, j = 0;
    i < userNameArr.length || j < orderGelen.length;
    i++, j++
  ) {
    dataHtml += `<tr>`;
    dataHtml += `<td>${userNameArr[i] ? userNameArr[i] : ""}</td>`;
    dataHtml += `<td>${orderGelen[j] ? orderGelen[j] : ""}</td>`;
    dataHtml += `</tr>`;
  }

и вы можете написать в таблицу как

  function tableConfig() {  
    tableBody.innerHTML = dataHtml;
   }

Надеюсь, это поможет