【実践課題D】

授業まとめ 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 numList = [[5,33],[12,14],[18,65]];

var strHtml="";

function calc(index){
	
	alert(numList[index][0]+"×"+numList[index][1]+"の答えは"+(parseInt(numList[index][0])*parseInt(numList[index][1])));
	
}

</script>

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

<body>

<form name="calcForm">

<table>
	<tr>
  	<th>添え字</th><th>a</th><th>b</th><th>a×bを計算</th>
  </tr>
<script type="text/javascript">

for(i=0;i<numList.length;i++){
	var btnHtml = "<input type='button' value='計算結果' onclick='calc("+i+");'>";
	strHtml+="<tr><th>"+i+"</th><td>"+numList[i][0]+"</td><td>"+numList[i][0]+"</td><td>"+btnHtml+"</td></tr>";
}

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

</script>
</table>
</form>


</body>
</html>