Matriz de Javascript a la tabla html

Quiero hacer una tabla html desde una matriz. Quiero usar la función de bucle para hacer esto. Pero me cuesta descubrir cómo puedo enlazar una matriz a una tabla html. Quiero tener el nombre de los países en la primera sección y “país” en la parte superior de los países. En la última sección quiero tener los capitales y “Capital” en la parte superior.

Aquí está mi código html:

      var country = ["Norway", "Sweden", "Denmark"]; var capital = ["Oslo", "Stockholm" , "Copenhagen"]    

Puede hacer esto recorriendo la lista de países y creando una cadena HTML. Luego puedes poner eso dentro del tbody usando una clase o un selector de id. Aquí hay un ejemplo-

 var country = ["Norway", "Sweden", "Denmark"]; var capital = ["Oslo", "Stockholm" , "Copenhagen"] var bodyString = ''; $.each(country, function(index, ctry) { bodyString += (''+ctry+''+capital[index]+''); }); $('.countriesTable tbody').html(bodyString); 
       
CountryCapital

Creo que quieres algo como esto, que es javascript puro (Ejecutar el fragmento) –

 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 
 table{ border-collapse: collapse; } th,td{ border:1px solid #000; } 

Hice una herramienta fácil para esto: https://github.com/dszakal/ArrayToTable

Ejemplo:

 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'); 
         
CountryCapital

Es una buena forma de usar literales de plantilla.

      Array2Table   

para Internet Explorer:

 var country = ["Norway", "Sweden", "Denmark"]; var capital = ["Oslo", "Stockholm", "Copenhagen"]; var tmpl = function tmpl(country, capital) { return "" + country.map(function (cell, index) { return ""; }).join('') + "
CountryCapital
" + cell + "" + capital[index] + "
"; }; tableContent.innerHTML = tmpl(country, capital);