无法从 HTML 表格中更改输入字段的值

Question

我正在创建一个用于开票的 html 页面，其中我创建了一个包含以下列的表格：序列号、类别名称、产品名称、数量、单价和金额。这里金额=数量*单价

单价仅从 mysql 数据库中获取。当用户更改产品的数量时，使用 javascript 中的 onkeyup 函数将 Amount 更改为 Quantity*Unit Price。这工作正常。

但是，我保留了一个字段名称 Total Amount，它在表格之外，但在 HTML 文档中具有唯一的 id，它是 Amount 列中所有值的总和。在 Quantity 的同一个 onkeyup 函数中，我想更新该 Total Amount。我尝试按以下方式进行操作（尽管目前不完全是总和，而只是相应行中的 Amount 值），但这是行不通的：-

 $(".qty").on("keyup", function () {
    var $this = $(this);
    $tr = $this.closest('tr');
    qty_val = $this.val();
    unitprice_val = $tr.find('.unit_price').val();
    amount = qty_val*unitprice_val;
    $(this).closest('tr').find('.pricecalc').attr("value", amount);
    //$('#total_amount').val(amount);
    //$(this).find('.total_amount').attr("value",amount);
    //$(this).find('.total_discount').val(amount);
 });

总输入的表格和字段是：-

   <!-- TABLE starts here -->
    <table id="my_table_id" name="billitems">
        <tr>
            <td>Sr. No.</td>
            <td>Category</td>
            <td>Product</td>
            <td>Quantity</td>
            <td>Unit Price</td>
            <td>Amount</td>
        </tr>

        <tr class="clone_this">
            <td>1.</td>
            <td>
            <select style="width:150px;" class="gr" name="categories[]">
                <option value="Select Category">Select Category</option>        
                <?php 
                    include 'connect_my_sql_db.php';
                    $qry = "SELECT cat_id, cat_name FROM category;";
                    $res = mysqli_query($conn, $qry);
                    while($data = mysqli_fetch_row($res)){
                    echo ("<option value='$data[1]'>$data[1]</option>");
                }
                ?></td>
            <td class="sub_item"><select style="width:150px;" class="it_id" name="products[]">
                <option value="Select Product">Select Product</option>
            </td>
            <td><input class="qty" type="number" step="0.01" placeholder="ex: 12.50" name="qty[]" value="0.00" required onkeyup="updatePrice(this.value)"></td>
            <td><input class="unit_price" type="number" step="0.01" placeholder="ex: 56.50" name="unitprice[]" value="0.00" required onkeyup="updatePrice(this.value)"></td>
            <td><input class="pricecalc" type="number" step="0.01" placeholder="will be calculated" name="calculatedprice[]" value="0.00" required readonly="readonly"></td>
        </tr>


    </table>
    <input type="button" value="Add more items" id="more_items" style="margin-top:10px; margin-bottom:20px"/><br>

    <span class="sameline">
            <label class="smalllabel" style="width:100px;">Total Amount</label>
            <input class="total_amount" id="total_amount "type="number" step="0.01" placeholder="will be calculated" name="total_amount" value="0.00" required readonly="readonly"></td>
    </span><br><br>

Answer 1

你可以使用：

 $(this).closest('tr').find('.pricecalc')[0].value = amount;

代替：

 $(this).closest('tr').find('.pricecalc').attr("value", amount);