how do i build a table dynamically in this scenario-CodePudding

I have a variable which contains an array of arrays. It is parsed code from an excel file.

I want to upload my file and build the table, ive tried it like this:

tabela.forEach((elem, index) => {
  console.log(elem[0], index[1])
  const row = tableBody.insertRow(index)
  const employeeCell = row.insertCell(0)
  let content = document.createTextNode(elem[0])
  employeeCell.appendChild(content)
})

and like this:

for (let i = 1; i < tabela.length; i  ) {
  const row = tableBody.insertRow(tabela[1])
  const employeeCell = row.insertCell(0)
  let content = document.createTextNode(tabela[0])
  employeeCell.appendChild(content)
}

but I get strange results with both.

I really want to understand what Im doing but am having issues.

The variable tabela is an array of 13 elements, each element is an array with 7 elements.

does anybody know what im doing wrong how to make it so i build a whole table from the parsed code from "tabela" variable?

CodePudding user response：

You need to loop through the elements of row to add a cell for each element.

tabela.forEach(elem => {
  const row = tableBody.insertRow();
  elem.forEach(item => {
    const cell = row.insertCell();
    cell.innerText = item;
  });
})

CodePudding user response：

The following demo shows how you can accomplish your task using jQuery.

const tablea = [
    [30,45,2,9,0],
    [455,65,0,5,78],
    [1,1,4,4,6]
];
let $tableBody = $('#xdata tbody');
$tableBody.html(
    tablea.map(row => $('<tr/>').html(
        row.map(cell => $('<td/>').html( cell ))
    ))
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="xdata"><tbody></tbody></table>