Generate html <table> content with JavaScript array

Question

var array = [
['name1', 'material1', 'number1', 'place1', 'country1'],
['name2', 'material2', 'number2', 'place2', 'country2']
];

This is the js array

<table>
    <tr>
        <th>Name</th>
        <th>Material</th>
        <th>Number</th>
        <th>Place</th>
        <th>Country</th>
    </tr>
</table>

This is the html table i have

Now i want the values of the array generated in my table with pure JS. How is this possible?

Have you searched or tried anything so far? do you have any JS knowledge? Do some effort and show us where you struggle and we will help for sure. — Zakaria Acharki
– Zakaria Acharki, Commented Mar 22, 2019 at 9:59
Yes i have worked with JS before, only i have no idea how to work this out. @ZakariaAcharki — Jack Kiurre
– Jack Kiurre, Commented Mar 22, 2019 at 10:01
Please do add your progress so far in your post to address a specific issue and not just ask for a given desired result from a given value. — Alex Pappas
– Alex Pappas, Commented Mar 22, 2019 at 10:02
Possible duplicate of Generate HTML table from 2D JavaScript array and Javascript create table with for loop and array — adiga
– adiga, Commented Mar 22, 2019 at 10:03

Roy Bogado · Accepted Answer · 2019-03-22 10:10:23Z

Check this fiddler: https://jsfiddle.net/a3r8ze0g/

You need to itinerate the array like this:

arr.forEach(function(elem){ //Where arr is the array

var arr = [
['name1', 'material1', 'number1', 'place1', 'country1'],
['name2', 'material2', 'number2', 'place2', 'country2']
];

var tabla = document.getElementById('newTable');

arr.forEach(function(elem){

    var tr = tabla.insertRow();
  tr.innerHTML = '<td>'+elem[0]+'</td><td>'+elem[1]+'</td><td>'+elem[2]+'</td><td>'+elem[3]+'</td><td>'+elem[4]+'</td>';
})

var arr = [
['name1', 'material1', 'number1', 'place1', 'country1'],
['name2', 'material2', 'number2', 'place2', 'country2']
];

var tabla = document.getElementById('newTable');

arr.forEach(function(elem){
  
	var tr = tabla.insertRow();
  tr.innerHTML = '<td>'+elem[0]+'</td><td>'+elem[1]+'</td><td>'+elem[2]+'</td><td>'+elem[3]+'</td><td>'+elem[4]+'</td>';
})

<table id="newTable">
    <tr>
        <th>Name</th>
        <th>Material</th>
        <th>Number</th>
        <th>Place</th>
        <th>Country</th>
    </tr>
</table>

Ankit Agarwal · Accepted Answer · 2019-03-22 10:03:50Z

0

You can loop over to the array and create a HTML string with <tr> and <td> then apply those to the inner HTML of the table element:

var array = [
['name1', 'material1', 'number1', 'place1', 'country1'],
['name2', 'material2', 'number2', 'place2', 'country2']
];
var nHTML = document.querySelector('table').innerHTML;
array.forEach(function(arrItem){
  var td = '<tr>';
  arrItem.forEach(function(item){
    td += '<td>'+item+'</td>' ;
  });
  nHTML += td + '</tr>';
});
document.querySelector('table').innerHTML = nHTML;

<table border='1'>
    <tr>
        <th>Name</th>
        <th>Material</th>
        <th>Number</th>
        <th>Place</th>
        <th>Country</th>
    </tr>
</table>

answered Mar 22, 2019 at 10:03

Ankit Agarwal

30.8k5 gold badges41 silver badges63 bronze badges

2 Comments

Jack Kiurre Over a year ago

Works perfect, THANKS!

Ankit Agarwal Over a year ago

@JackKiurre you can tick mark the answer if it was helpful to you

Collectives™ on Stack Overflow

Generate html <table> content with JavaScript array

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related