配列で表組みを表示｜実践課題B

プレビュー

PC版

配列で表組みを表示 - jsdo.it - share JavaScript, HTML5 and CSS

スマートフォン版

コード

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>配列</title>
<style>
body {
    font-family:
	"ヒラギノ角ゴ Pro W3",
	"Hiragino Kaku Gothic Pro",
	"メイリオ", 
	Meiryo, Osaka, 
	"ＭＳ Ｐゴシック", 
	"MS PGothic", 
	sans-serif；	
}
h1 {
    font-size: 1.2em;
}
table,th,td {
    border: 1px solid #000;
    border-collapse: collapse;
}
th {
    background-color: #EEE;
    width: 200px;
    height: 30px;
}
td {
    text-align: center;
    height: 30px;
}
</style>
<script>
var product = [
    {name:'リラックスチェア',price:'4000円'},
    {name:'リラックスデスク',price:'12000円'},
    {name:'ブックスタンド',price:'800円'}
];
</script>
</head>
<body>
<script>
document.write("<h1>新商品価格表<\/h1>");

document.write("<table>");
document.write("<tr><th>製品名<\/th><th>価格<\/th><\/tr>");

for(var i=0 ; i<product.length; i++){
    document.write("<tr>");
    document.write("<td>",product[i].name,"<\/td>");
    document.write("<td>",product[i].price,"<\/td>");
    document.write("<\/tr>");
}
document.write("<\/table>");
</script>
</body>
</html>