読者です 読者をやめる 読者になる 読者になる

ウェブ学のすすめ

Study of Web Design & Programing

配列で作る商品の単価と個数の関係の表組み|実践課題E

JavaScript

コード

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>配列</title>
<style>
body {
    font-family:
	"ヒラギノ角ゴ Pro W3",
	"Hiragino Kaku Gothic Pro",
	"メイリオ", 
	Meiryo, Osaka, 
	"MS Pゴシック", 
	"MS PGothic", 
	sans-serif}
table,th,td {
    border: 1px solid #000;
    border-collapse: collapse;
}
th {
    background-color: #eee;
    width: 100px;
}
td {
    text-align: center;
    width: 100px;
}
</style>
<script>
var price = [300,450,520];
</script>
</head>
<body>
<script>
document.write("<h1>配列の演算</h1>");

document.write("<table>");
document.write("<tr><th>個数<\/th><th>商品A<\/th><th>商品B<\/th><th>商品B<\/th><\/tr>");

for(var i=1; i<=10; i++){
    document.write("<tr>");	
    document.write("<th>",i,"</th>");
    for(j=0; j<=2; j++){
	document.write("<td>",price[j]*i,"円<\/td>");
    }
    document.write("<\/tr>");
}
document.write("<\/table>");
</script>
</body>
</html>

ポイント

  • for文の中にfor文をネストする