実践課題B

JavaScript課題

配列を使い、以下のような表組みを表示させなさい。

http://felica.boy.jp/js-kadai/jissen-b

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
  <script>
	<!--
		var prodName = ['リラックスチェア','リラックスデスク','ブックスタンド'];
		var prodPrice = [4000,12000,800];
	-->
	</script>
  <style>
	<!--
		table {
			border-collapse: collapse;
		}
		th,td {
			width: 200px;
			text-align: center;
			padding: 5px;
		}
		th {
			background-color: #eee;
		}
	-->
	</style>
</head>
<body>
	<table border="1">
  	<tr><th>製品名</th><th>価格</th></tr>
    <script>
	<!--
		document.write('<tr>');
			document.write('<td>'+ prodName[0] +'<\/td>');
			document.write('<td>'+ prodPrice[0] +'円<\/td>');
		document.write('<\/tr>');
		
		document.write('<tr>');
			document.write('<td>'+ prodName[1] +'<\/td>');
			document.write('<td>'+ prodPrice[1] +'円<\/td>');
		document.write('<\/tr>');
		
		document.write('<tr>');
			document.write('<td>'+ prodName[2] +'<\/td>');
			document.write('<td>'+ prodPrice[2] +'円<\/td>');
		document.write('<\/tr>');
	-->
	</script>
  </table>
</body>
</html>

for文を使う
http://felica.boy.jp/js-kadai/jissen-b-2

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
  <script>
	<!--
		var prodName = ['リラックスチェア','リラックスデスク','ブックスタンド'];
		var prodPrice = [4000,12000,800];
	-->
	</script>
  <style>
	<!--
		table {
			border-collapse: collapse;
		}
		th,td {
			width: 200px;
			text-align: center;
			padding: 5px;
		}
		th {
			background-color: #eee;
		}
	-->
	</style>
</head>
<body>
	<table border="1">
  	<tr><th>製品名</th><th>価格</th></tr>
    <script>
	<!--
		for (i=0; i<3; i++) {
			document.write('<tr><td>'+ prodName[i] +'</td><td>' + prodPrice[i] + '</td></tr>');
		}
	-->
	</script>
  </table>
</body>
</html>