如何将价格乘以数量

Question

我知道这个问题已被多次询问，但我找不到符合我要求的问题。到目前为止，我已动态创建了一个带复选框的表。检查的行被放入一个数组进行进一步处理，并生成一个表格用于确认我这里唯一的问题是我无法将数量与价格相乘。 （注意 - 所有行都具有相同的id和名称，因为它们是动态的） 代码 -

<table class="table" id="myTable">
         <thead class="text-danger">
               <th>Name</th>
                <th>Price</th>
                <th>Quantity</th>
                 <th>Select</th>
            </thead>
<tbody>

<?php while($row = mysqli_fetch_assoc($result)) { ?>
<tr>
<td><?php echo $row["name"]; ?>
<input type="hidden" name="proname" value="<?php echo $row["name"]; >" />
</td>
<td class="text-warning"><?php echo $row["price"]; ?>
<input type="hidden" name="price" id="pri01" value="<?php echo $row["price"]; ?>" />
</td>
<td>
<div class="numbers-row">
<div class="col-sm-2">
<div class="form-group">
    <input type="text" class="form-control" name="qua" id="qua01" value="1" style="cursor:default" disabled />
</div>
</div>
</div>
</td>
<td>
<div class="checkbox">
<label>
      <input id="name" type="checkbox" name="name" value="<?php echo $row["food_id"]; ?>"/>
</label>
</div>
</td>
</tr>
<?php } ?>
</tbody>
</table>
<center><button type="submit" class="btn btn-warning tble_submit" data-toggle="modal" data-target="#myModal">Order</button></center>

 <!-- Here is where the second table is shown which displays only the rows which are checked in the first table -->
 <div id="showData"></div>

JS -

 $(function() {
$('.tble_submit').click(function(){
    var values = [];
    $("#add input[name=name]:checked").each(function(){

        row = $(this).closest("tr");
        values.push({ 
            Id        : $(this).val(),
            Name      : $(row).find("input[name=proname]").val(),
            Price     : $(row).find("input[name=price]").val(),
            Quantity  : $(row).find("input[name=qua]").val()       
        });
    });

   // console.log(values);
   if(values.length != 0){
    var col = [];
    for (var i = 0; i < values.length; i++) {
        for (var key in values[i]) {
            if (col.indexOf(key) === -1) {
                col.push(key);
            }
        }
    }

     var table = document.createElement("table");
     table.setAttribute("class", "table"); 

    var tr = table.insertRow(-1);                   // TABLE ROW.

    for (var i = 0; i < col.length; i++) {
        var th = document.createElement("th");      // TABLE HEADER.
        th.innerHTML = col[i];
        tr.appendChild(th);
    }

    for (var i = 0; i < values.length; i++) {

        tr = table.insertRow(-1);

        for (var j = 0; j < col.length; j++) {
            var tabCell = tr.insertCell(-1);
            tabCell.innerHTML = values[i][col[j]];
        }
    }
    var divContainer = document.getElementById("showData");
    divContainer.innerHTML = "";
    divContainer.appendChild(table);   
} else {
 document.getElementById("showData").innerHTML = "XXXX";
}
});

});