javascript - 输入价格后如何在表格中添加另一行并计算金额(数量*价格)？

Question

我有一个页面，其中有一个表格，我们可以在其中选择一个产品，输入它的数量和价格，然后应在最后一列中计算金额，并应添加新行以输入更多产品，直到我们完成为止。

<table id="products_table" class="table table-hover" name="products">
    <thead>
        <tr>
            <th scope="col">Name</th>
            <th scope="col">Quantity</th>
            <th scope="col">Pieces</th>
            <th scope="col">Price</th>
            <th scope="col">Amount</th>                                 
        </tr>
    </thead>
    <tbody> 
        <tr class="" id="templateRow">                  
            <td>
                <select style = "margin-left:20px" name="product_id">
                <?php
                    while($r = mysqli_fetch_assoc($presult))
                    {
                        ?>
                        <option value =<?php echo $r["id"]?>><?php echo $r["name"]?></option>
                        <?php
                    }
                ?>
                </select>
            </td>
            <td><input type="float" name="quantity" oninput="SetQuantity(this)"></td>
            <td><input type="float" name="pieces"></td>
            <td><input type="float" name="price" oninput="calculate(this)"></td>
            <td><input type="text"></td>
        </tr>
    </tbody>
</table>

<script>

var quantity=0;

function SetQuantity(row)
{
    quantity = row.value;
}

function addrow() 
{
    var table = document.getElementsByTagName('table')[0];
    var length = table.rows.length; 
    table.insertRow(table.rows.length);
    alert(length);  
}

function calculate(row)
{
    alert(row.value * quantity);
    addrow();
}
</script>

Answer 1

像这样尝试。

var quantity=0;
var total = 0;
var price = 0;

function addrow() 
{
    var table = document.getElementsByTagName('table')[0];
    var length = table.rows.length; 
    table.insertRow(table.rows.length);
    alert(length);  
}

function calculate(qtyId,priceId,id)
{
     quantity = document.getElementById(qtyId).value;
     price = document.getElementById(priceId).value;

     total = quantity * price;
     if(isNaN(total))
      total = 0;
      
    document.getElementById(id).value = total;
}


var index = 1;
function insertRow(){
            var table=document.getElementById("products_table");
            var row=table.insertRow(table.rows.length);
            var cell0=row.insertCell(0);
            cell0.innerHTML="Name";
            var cell1=row.insertCell(1);
            var t1=document.createElement("input");
            t1.addEventListener('input',function(){ calculate('quantityId'+(index-1),'priceId'+(index-1), 'amountId'+(index-1))})
                t1.id = "quantityId"+index;
                cell1.appendChild(t1);
            var cell2=row.insertCell(2);
            var t2=document.createElement("input");
                t2.id = "piecesId"+index;
                cell2.appendChild(t2);
            var cell3=row.insertCell(3);
            var t3=document.createElement("input");
                t3.id = "priceId"+index;
                t3.addEventListener('input',function(){ calculate('quantityId'+(index-1),'priceId'+(index-1), 'amountId'+(index-1))})
                cell3.appendChild(t3);
            var cell4=row.insertCell(4);
            var t4=document.createElement("input");
                t4.id = "amountId"+index;
                cell4.appendChild(t4);
      index++;

}

<input type="button" onClick="insertRow()"/>
<table id="products_table" class="table table-hover" name="products">
    <thead>
        <tr>
            <th scope="col">Name</th>
            <th scope="col">Quantity</th>
            <th scope="col">Pieces</th>
            <th scope="col">Price</th>
            <th scope="col">Amount</th>                                 
        </tr>
    </thead>
    <tbody> 
        <tr class="" id="templateRow">                  
            <td>
                name
            </td>
            <td><input type="float" name="quantity" id="quantityId" oninput="calculate('quantityId','priceId','amountId')"></td>
            <td><input type="float" name="pieces" id="piecesId"></td>
            <td><input type="float" name="price" id="priceId" oninput="calculate('quantityId','priceId','amountId')"></td>
            <td><input type="text" id="amountId"></td>
        </tr>
    </tbody>
</table>