Javascript数组到HTML表
[英]Javascript array to html table
问题描述
I want to make a html table from an array. 
我想从数组制作一个html表。 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. 但是我很难弄清楚如何将数组循环到html表。 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: 这是我的html代码：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
var country = ["Norway", "Sweden", "Denmark"];
var capital = ["Oslo", "Stockholm" , "Copenhagen"]
</script>
</body>
</html>
5 个解决方案
解决方案1
2 2017-05-04 05:06:59
I think you want something like this, which is pure javascript (Run the snippet)-- 我认为您想要这样的东西，它是纯JavaScript（运行代码段）-
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; }
解决方案2
1 2017-05-04 04:43:53
You can do this by looping through the country list and creating an HTML string. 您可以通过遍历国家/地区列表并创建HTML字符串来实现此目的。 Then you can put that inside the tbody using a class or id selector. 然后，您可以使用类或id选择器将其放在tbody 。 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>
解决方案3
1 2017-08-15 12:49:46
I made an easy tool for this - https://github.com/dszakal/ArrayToTable 我为此做了一个简单的工具-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');
解决方案4
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>
解决方案5
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: 对于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);
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.