计价器制作(循环嵌套练习)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
table tr td{width: 100px;height: 50px;}
table tr td input{width: 100px;height: 50px;}
</style>
</head>
<body>
<!-- <h3 style="color:red;">先点总价,再点计算</h3> -->
<table border="1" style="text-align:center;">
<tr id="n">
<td>水果</td><td>单价(¥)</td><td>销售量(个)</td><td><button id="pus1">总价(¥)</button></td>
</tr>
<tr id="n">
<td>苹果</td><td>2</td><td>10</td><td></td>
</tr>
<tr id="n">
<td>葡萄</td><td>3</td><td>10</td><td></td>
</tr>
<tr id="n">
<td>香蕉</td><td>5</td><td>10</td><td></td>
</tr>
<tr id="n">
<td><button id="pus2">计算</button></td><td></td><td></td><td></td>
</tr>
</table>
<script type="text/javascript">
var pus1=document.getElementById("pus1");
var pus2=document.getElementById("pus2");
var n=document.getElementById("n");
var rows=document.getElementsByTagName("tr");//h
var cells=n.getElementsByTagName("td");//w
pus1.onclick=function(){
for(var i=1;i<(rows.length-1);i++){//列循环
var a=1;//运行次数
for(var j=1;j<(cells.length-1);j++){//行循环
var p=rows[i].cells[j].innerHTML;//取值定义为p
a=a*p; //第一次为本值a(1*p),第二次为二次的值a*第一次的值a(1*p)
}
rows[i].cells[cells.length-1].innerHTML=a;//把得到的值设为总价,赋给每行的最后一个,设为单个总价
}
}
pus2.onclick=function(){
for(var i=1;i<(rows.length-1);i++){
var a=0;
for(var j=1;j<(cells.length);j++){
var p=parseInt(rows[j].cells[i].innerHTML);//行列调换,取值
a=a+p;
}
rows[rows.length-1].cells[i].innerHTML=a;//把得到的值设为总价,赋给每列的最后一个,设为最后总价
}
}
</script>
</body>
</html>

posted @ 2017-04-19 23:17  非凡。  阅读(123)  评论(0编辑  收藏  举报