Javascript array to html table
Question
I want to make a html table from an array. I want to use the loop function to do this. But I struggle to find out how I can loop an array to a html table. I want have the name of the countries in the first section and "country" on top of the countries. In the last section I want to have the Capitals and "Capital" on top.
Here is my html code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
var country = ["Norway", "Sweden", "Denmark"];
var capital = ["Oslo", "Stockholm" , "Copenhagen"]
</script>
</body>
</html>
5 answers
solution1
2 2017-05-04 05:06:59
I think you want something like this, which is pure javascript (Run the snippet)--
var country = ["Norway", "Sweden", "Denmark"]; var capital = ["Oslo", "Stockholm" , "Copenhagen"] var table= document.createElement('table'), thead = document.createElement('thead'), tbody = document.createElement('tbody'), th, tr, td; th = document.createElement('th'), th.innerHTML="County"; table.appendChild(th); th = document.createElement('th'); th.innerHTML= "Capital" table.appendChild(th); table.appendChild(thead); table.appendChild(tbody); document.body.appendChild(table); for(var i=0;i<country.length;i++){ tr = document.createElement('tr'), //for county td= document.createElement('td'); td.innerHTML=country[i]; tr.appendChild(td); //for capital td = document.createElement('td'); td.innerHTML=capital[i]; tr.appendChild(td); tbody.appendChild(tr); }
table{ border-collapse: collapse; } th,td{ border:1px solid #000; }
solution2
1 2017-05-04 04:43:53
You can do this by looping through the country list and creating an HTML string. Then you can put that inside the tbody using a class or id selector. Here is an example-
var country = ["Norway", "Sweden", "Denmark"]; var capital = ["Oslo", "Stockholm" , "Copenhagen"] var bodyString = ''; $.each(country, function(index, ctry) { bodyString += ('<tr><td>'+ctry+'</td><td>'+capital[index]+'</td></tr>'); }); $('.countriesTable tbody').html(bodyString);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <!DOCTYPE html> <html> <head> </head> <body> <table class="countriesTable"> <thead> <tr><th>Country</th><th>Capital</th> </thead> <tbody> </tbody> </table> </body> </html>
solution3
1 2017-08-15 12:49:46
I made an easy tool for this - https://github.com/dszakal/ArrayToTable
Example:
var tableGen = new ArrayToTable();
// optional
tableGen.tableclasses = 'bluetable table-with-oddeven'; // for css
tableGen.tableid = 'something-unique';
dataArray = [
{
country: 'Norway',
capital: 'Oslo'
}
,
{
country: 'Sweden',
capital: 'Stockholm'
}
,
{
country: 'Denmark',
capital: 'Copenhagen'
}
];
tableGen.putTableHtmlToId(dataArray, 'tableHere');
solution4
0 2017-05-04 04:54:17
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script> $(document).ready(function(){ var country = ["Norway", "Sweden", "Denmark"]; var capital = ["Oslo", "Stockholm" , "Copenhagen"]; var bodyString = ''; $.each(country, function(index, country) { bodyString += ('<tr><td>'+country+'</td><td>'+capital[index]+'</td></tr>'); }); $('.country tbody').html(bodyString); }); </script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> </head> <body> <table class="table table-striped country"> <thead> <tr><th>Country</th><th>Capital</th> </thead> <tbody></tbody> </table> </body> </html>
solution5
0 2017-05-04 07:46:49
it´sa nice way to use template literals
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Array2Table</title>
</head>
<body>
<div id="tableContent"></div>
<script>
var country = ["Norway", "Sweden", "Denmark"];
var capital = ["Oslo", "Stockholm" , "Copenhagen"]
const tmpl = (country,capital) => `
<table><thead>
<tr><th>Country<th>Capital<tbody>
${country.map( (cell, index) => `
<tr><td>${cell}<td>${capital[index]}</tr>
`).join('')}
</table>`;
tableContent.innerHTML=tmpl(country, capital);
</script>
</body>
</html>
for Internet Explorer:
var country = ["Norway", "Sweden", "Denmark"];
var capital = ["Oslo", "Stockholm", "Copenhagen"];
var tmpl = function tmpl(country, capital) {
return "<table><thead><tr><th>Country<th>Capital<tbody>" +
country.map(function (cell, index) {
return "<tr><td>" + cell + "<td>" +
capital[index] + "</tr>";
}).join('') + "</table>";
};
tableContent.innerHTML = tmpl(country, capital);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.