【実践課題E】

授業まとめ javascript

以下のように商品の単価と個数の関係の表組みを表示させなさい。

解答


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">

table{
	border:1px solid #333;
	border-collapse:collapse;
}

th{
	width:200px;
	border:1px solid #333;
	background-color:#999999;
}
td{
	border:1px solid #333;
	background-color:#fff;
	text-align:center;
}
</style>

<script type="text/javascript">

var unitPrice=[300,450,520];
var calcCount=10;
var strHtml="";

</script>

<title>合計計算</title>
</head>

<body>
<h1>配列の演算</h1>
<table>
	<tr>
  	<th>個数</th><th>商品A</th><th>商品B</th><th>商品C</th>
  </tr>
<script type="text/javascript">
for(i=0;i<calcCount;i++){
	strHtml+="<tr><th>"+(i+1)+"</th><td>"+(unitPrice[0]*(i+1))+"</td><td>"+(unitPrice[1]*(i+1))+"</td><td>"+(unitPrice[2]*(i+1))+"</td></tr>";
}

document.write(strHtml+"</table>");
</script>


</body>
</html>