【実践課題F】

授業まとめ 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;
}

.no_item{
	border:1px solid #333;
	background-color:#fff;
	text-align:center;
	color:#FF0000;
}

</style>

<script type="text/javascript">

var list = [["リラックスチェア",4000,500],["リラックスデスク",12000,400],["ブックスタンド",800,0]];

</script>

<title>実践課題F</title>
</head>

<body>
<h1>在庫管理</h1>
<table>
	<tr>
  	<th>製品名</th><th>価格</th><th>在庫</th>
  </tr>
<script type="text/javascript">
var strHtml="";
for(i=0;i<list.length;i++){
	strHtml+="<tr><td>"+list[i][0]+"</td><td>"+list[i][1]+"</td>";
	if(parseInt(list[i][2])==0){
		strHtml+="<td class='no_item'>在庫なし</td></tr>"
	}else{
		strHtml+="<td>"+list[i][2]+"</td></tr>"
	}
}

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


</body>
</html>