Javascript配列からhtmlテーブル

配列からhtmlテーブルを作成したいと思います。私はこれを行うためにループ関数を使いたいと思います。しかし、どのようにhtmlテーブルに配列をループできるかを調べるのは難しいです。私は最初のセクションに国の名前を、国の上に "国"を持ってほしい。最後のセクションでは、首都と首都を頂きたいと思っています。ここでJavascript配列からhtmlテーブル

は私のhtmlコードです：

<!DOCTYPE html> 
<html> 
<head> 
</head> 
<body> 


    <script> 

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




    </script> 
</body> 
</html>

出典

2017-05-04 Olaf lol

[

タグ内に配列値を表示する方法は？]（http://stackoverflow.com/questions/12178792/how-to-display-array-values-inside-table-tag） – nelek

答えて

あなたは国のリストをループしてHTML文字列を作成することによってこれを行うことができます。次に、クラスまたはidセレクタを使用してtbodyの中に入れることができます。

- ここで私はあなたが純粋なJavaScriptのである。このようなものを、（スニペットを実行）したいと思います例 -

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>

出典

2017-05-04 04:43:53

<!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>

出典

2017-05-04 04:54:17

です

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; 
 
}

Internet Explorer用の

<!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>

テンプレートリテラルを使用するための良い方法it'sa

出典

2017-05-04 05:06:59

：

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

出典

2017-05-04 07:46:49

私は、このための簡単なツール作られた - https://github.com/dszakal/ArrayToTable

例：

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

出典

2017-08-15 12:49:46 dszakal

Javascript配列からhtmlテーブル

答えて

関連する問題