I want to make a table from an array. I want to have 3 rows and 3 columns. The rows heading name should be 1,2,3. And the columns should be the name of the arrays: "country", "Capital", "population".
Here is my html:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
var country = ["Norway", "Sweden", "Denmark"];
var capital = ["Oslo", "Stockholm", "Copenhagen"];
var population = ["5,2", "9.8", "5,7"];
</body>
</html>
Here is an example of how to do it using jQuery. Per the comment of Roko C. Buljan I have changed the append to a concatenation.
//Array
var country = ["Norway", "Sweden", "Denmark"];
var capital = ["Oslo", "Stockholm", "Copenhagen"];
var population = ["5,2", "9.8", "5,7"];
//Start the table
var table = '<table>';
//Add the Headers
table += '<thead><tr><th>Country</th><th>Capital</th><th>Population</th></tr></thead>';
//Start the body
table += '<tbody>';
//Add the inner rows
for (i = 0; i < country.length; i++) {
table += '<tr><td>' + country[i] + '</td><td>' + capital[i] + '</td><td>' + population[i] + '</td></tr>';
}
//Close the body and the table
table += '</tbody></table>';
//Add the completed table to the HTML
$('#table').append(table);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='table'></div>
< 3?
Nest the arrays into an object. From there attach to the table by repeating cells.
var country = ["Norway","Sweden", "Denmark"];
var capital = ["Oslo", "Stockholm", "Copenhagen"];
var population = ["5,2", "9.8", "5,7"];
var table={};
country.forEach((countries,key)=>
table[key]={country:countries,capital:capital[key],population:population[key]})
function tableCreate( table,l=Object.keys(table).length){
var count=1;
var body = document.body,
tbl = document.createElement('table');
tbl.style.width = '100px';
tbl.style.border = '1px solid black';
for(var i in table){
var tr = tbl.insertRow();
tr.appendChild(document.createTextNode(count));
for(var j in table[i]){
td = tr.insertCell();
td.appendChild(document.createTextNode(table[i][j]));
td.style.border = '1px solid black';
}
count++
}
body.appendChild(tbl);
}
tableCreate(table);or
var country = ["Norway","Sweden", "Denmark"];
var capital = ["Oslo", "Stockholm", "Copenhagen"];
var population = ["5,2", "9.8", "5,7"];
var table={};
country.forEach((countries,key)=>
table[key]={country:countries,capital:capital[key],population:population[key]})
function tableCreate( table,l=Object.keys(table).length){
var body = document.body,
tbl = document.createElement('table');
tbl.style.width = '100px';
tbl.style.border = '1px solid black';
for(var i in table){
var tr = tbl.insertRow();
for(var j in table[i]){
var td = tr.insertCell();
td.appendChild(document.createTextNode(table[i][j]));
td.style.border = '1px solid black';
}
}
body.appendChild(tbl);
}
tableCreate(table);
jQueryorJavascript?