-3
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?

Jack Kiurre
  • 17
  • 4
  • 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 Mar 22 '19 at 09:59
  • Yes i have worked with JS before, only i have no idea how to work this out. @ZakariaAcharki – Jack Kiurre Mar 22 '19 at 10:01
  • refer this https://www.w3schools.com/jsref/met_table_insertrow.asp – Serene Abraham Mathew Mar 22 '19 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 Mar 22 '19 at 10:02
  • 1
    Possible duplicate of [Generate HTML table from 2D JavaScript array](https://stackoverflow.com/questions/15164655/generate-html-table-from-2d-javascript-array) and [Javascript create table with for loop and array](https://stackoverflow.com/questions/41947600) – adiga Mar 22 '19 at 10:03
  • https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement – Teemu Mar 22 '19 at 10:03
  • Her you go @JackKiurre take a look to this post : https://stackoverflow.com/a/38393375/4281779 – Zakaria Acharki Mar 22 '19 at 10:05

2 Answers2

1

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>
Roy Bogado
  • 4,299
  • 1
  • 15
  • 31
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>
Ankit Agarwal
  • 30,378
  • 5
  • 37
  • 62