如何在動態表中的同一行中找到元素？

Question

我正在制作一個包含一個帶有按鈕的表格的頁面，以添加一行。 它是供用戶輸入數據的表，最終將被提交到數據庫。

目前，每行都有一個價格和數量字段。 當它們中的任何一個改變時，我都想計算總數並將其寫入另一個單元格。

這是我的事件處理程序（包裝在$(document).ready() ）：

$(".quantity_input, .price_input").change(function () {
    console.log(this.value);
    cal_total();
});

這是我當前的代碼：

function cal_total() {
    if (isNaN(parseFloat(this.value))) {

      alert("You must enter a numeric value.");
      this.value = "";
      return;
    }

    var cell = this.parentNode;
    var row = cell.parentNode;
    var total = parseFloat($("#items_table tr").eq(row.index).find("td").eq(3).find("input").first().val()) * parseFloat($("#items_table tr").eq(row.index).find("td").eq(4).find("input").first().val());

    if (!isNaN(total)) {
      $("#items_table tr").eq(row.index).find("td").eq(5).html(total.toFixed(2));
    }
}

這是輸入的樣子：

 <input type='text' class='fancy_form quantity_input' name='quantities[]' size='4' style='text-align:center;border-bottom:none;'>

除了我最初的問題之外，該事件從未觸發過。 誰能看到原因？

但更重要的是，這是檢索值的最佳方法嗎？ 我真的不這么認為，但我無法提出任何更聰明的方法。

謝謝！

Answer 1

您必須將參數表傳遞給calc_total才能定義輸入或tr

試試這個代碼

 $(".quantity_input, .price_input").change(function () { $(".quantity_input, .price_input").change(function () { cal_total(this); }); }); function cal_total(elem){ var row=$(elem).closest("tr") var quantity=row.find(".quantity_input").val()-0 var price=row.find(".price_input").val()-0 var total=quantity * price row.find(".totl_input").val(total) } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td> <input class="quantity_input" /> </td> <td> <input class="price_input" /> </td> <td> <input class="totl_input" /> </td> </tr> <tr> <td> <input class="quantity_input" /> </td> <td> <input class="price_input" /> </td> <td> <input class="totl_input" /> </td> </tr> <tr> <td> <input class="quantity_input" /> </td> <td> <input class="price_input" /> </td> <td> <input class="totl_input" /> </td> </tr> </table>