無法更改HTML表格中輸入字段的值

我正在創建一個用於開票的HTML頁面，其中創建了一個包含以下列的表格：序列號，類別名稱，產品名稱，數量，單價和金額。此處金額=數量*單價無法更改HTML表格中輸入字段的值

單價僅從mysql db中提取。當用戶更改產品的數量時，將金額更改爲數量*單價，在JavaScript中使用onkeyup函數。這工作正常。

但是，我一直保留一個字段名稱Total Amount，它在表格之外，但在HTML文檔中具有唯一的id，這是Amount列中所有值的總和。在數量上相同的onkeyup功能，我想更新總金額。我想這樣的下方，這是不工作（雖然不是現在，但只是在相應的行中的金額值完全概括爲）做： -

$(".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>

來源

2017-04-06 Varun Aggarwal

而不是$（this）.closest（'tr'），使用$（this）.parent（）。child（'。pricecalc'）（例如）來指定字段。要設置字段的值，可以更改val（），而不是attr（'value'，val），IOW _ $（this）.parent（）。child（'。pricecalc'）。val（amount）; _ –

請點擊編輯器中的<>按鈕，創建一個沒有PHP但帶有足夠HTML的片段給我們一個[mcve] - 在這個問題中沒有任何PHP/mySQL相關 – mplungjan

對不起，我忘了提及計算成功更新同一行中的金額。唯一的問題是在表格外的總金額。正如@Alive to Die所建議的那樣，我會嘗試使用類來代替Total Amount輸入字段的id。 –

你可以使用：的

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

代替：

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

來源

2017-04-06 06:31:25 Peres

結果有什麼不同？ .val（數量）更簡單 – mplungjan

無法更改HTML表格中輸入字段的值

回答

相關問題