通过使用JavaScript在表中迭代来计算总价格-前端问题

Calculating total price by iterating in the table using JavaScript(通过使用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()">  &nbsp;&nbsp;<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的所有输入来执行此计算吗？