通过使用JavaScript在表中迭代来计算总价格 [英] Calculating total price by iterating in the table using JavaScript
本文介绍了通过使用JavaScript在表中迭代来计算总价格的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在做一个练习，其中我们必须使用HTML和JavaScript构建购物车。
动态添加每行后，用户输入要购买的每种药物的金额后，每行中提供的金额将乘以指定的价格。然后计算总数。HTML代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Drug Shopping Cart</title>
<script type="text/javascript" src="drugShoppingCart.js"></script>
</head>
<body>
<h1 style="text-align:center">Drug shopping cart</h1>
<h2 style="text-align:center">Please enter your age & weight then choose what medicaments you want to buy to calculte the total price.</h2>
<div style="text-align:center">
<input type="text" value="Age" id="getAge" />
<input type="text" value="Weight" id="getWeight" />
</div>
<br />
<div style="border:groove; border-color:#006; background-color:rgb(0,51,153); color:rgb(255,255,255)">
<table cellspacing="50" id="shopTable" align="center">
<th>Drug Name</th>
<th>Price</th>
<th>Amount</th>
<th>Allergic</th>
<th>Amount of drug per item</th>
<th>Daily dose</th>
</table>
<br />
<input type="button" value="Add a new item" onClick="addTable()"> <button onclick="calculate()">Calculate</button>
<br />
</div>
</body>
</html>
脚本如下：
var prices = ['', 5, 10, 15, 20];
var amntOfDrg = ['',"500mg", "250mg", "1mg", "0.5mg"];
var i=0; //Global counter - counts the number of rows
var cell2;
var cell4;
var cell5;
var cell6;
var age=document.getElementById("getAge");
var weight=document.getElementById("getWeight");
var weight;
var dropDown;
function selectChange(selection) {
cell2.innerHTML = prices[selection.selectedIndex];
if(selection.selectedIndex == 2 || selection.selectedIndex==3)
cell4.innerHTML= "<input type='checkbox' name='Allergic' value='yes' checked onclick='return false'>";
else
cell4.innerHTML=" <input type='checkbox' name='Allergic' value='no' unchecked onclick='return false'>";
cell5.innerHTML= amntOfDrg[selection.selectedIndex];
}
function addTable(){
i++;
var table=document.getElementById("shopTable");
{
var row = table.insertRow(1);
var cell1= row.insertCell(0);
cell2= row.insertCell(1);
var cell3= row.insertCell(2);
cell4= row.insertCell(3);
cell5= row.insertCell(4);
cell6= row.insertCell(5);
cell1.innerHTML= "<select id="selectMenu" " +
"onchange="selectChange(this)">" +
"<option value=''>Select a drug:</option>" +
"<option value='1'>Paracetamol</option>" +
"<option value='2'>Ibuprofen</option>" +
"<option value='3'>Saxagliptin</option>"+
"<option value='4'>Liraglutide</option>"+
"</select>";
cell3.innerHTML= "<input type='text' id='amount' value='Enter the amount here' />";
}
}
function calculate(){
var table=document.getElementById('shopTable');
}
计算应在calculate()函数中执行。
您知道如何通过访问Amount的所有输入来执行此计算吗？
推荐答案
function calculate(){
var table=document.getElementById('shopTable');
var count = table.getElementsByTagName('tr').length;
if (count > 0)
{
var total = 0;
for(var i = 1; i < count; i++)
{
total += table.rows[i].cells[1].innerHTML * table.rows[i].cells[2].children[0].value;
}
}
alert(total);
}
这篇关于通过使用JavaScript在表中迭代来计算总价格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
