配列からテーブルを作成したい。私は3行3列をしたい。行見出しの名前は1,2,3でなければなりません。そして、列は配列の名前でなければなりません： "country"、 "Capital"、 "population"。ここで配列テーブル
は私の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>
はjQueryを使用してそれを行う方法の一例です。 Roko C. Buljanのコメントでappendを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>OPが明示的に3行3列を要求されているのを知っていますが、ループが '<3'としてハードコードするのではなく、配列の長さに基づいていれば、それは良いでしょうか？ – nnnnnn
@nnnnnnはい、それを変更しました。 – blackandorangecat
Do not - 内側にループを追加します。代わりに連結のみ。 –
ネストオブジェクトに配列。そこから、細胞を繰り返すことで表に付着する。
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);又は
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);
[表にJavascriptのアレイを印刷]の可能な重複（https://stackoverflow.com/questions/11958641/ print-out-javascript-array-in-table） –
あなたは 'jQuery'または' Javascript'を使っていますか？ – blackandorangecat
あなたはこれを[ここ]（https://stackoverflow.com/questions/43773927/javascript-array-to-html-table）に尋ねましたか？ –