Javascript：付加価値を計算する

Question

サービスを追加するこの表があります。 Imはevry量を入力し、右側のキーアップに合計を表示しようとしています。

私は次の行ではなく、最初の行を得ることができます。すべての行を追加し price_displayで追加されたは、価格の値に qty_displayを保持しているは私が sub_dispplay出力値

Answer 1

を保持し、入力された値を保持している。ここ

は私のコード

$(document).on('keyup',function(){ 
    var pri = $('#price_display').val(); 
    var q = $('#qty_display').val(); 
    var tots = pri*q; 

    $('#sub_display').val(tots); 

    }); 

です各列に同じIDが割り当てられています（例えばid=price_display）。定義によるIDは各ページで一意である必要があるため、jQueryは常に各行の最初のインスタンス（つまり最初の行）を見つけます。

おそらく、これを回避する最も簡単な方法は、各フィールドに行番号を追加することです。 price_display_1、qty_display_1、sub_quantity_1など - jQueryは各フィールドの正しいインスタンスを探すことができます。

例を挙げておきますが、Angular Materialのようなものを使ってページをスタイルするように見えるので、面倒な作業を省くためにAngularJSのデータバインディングを調査することは貴重な時間です。クラスへ

// source data for table (array holds a JavaScript object per row) 
 
var tableData = [{ 
 
    serviceCode: 'xbed', 
 
    serviceName: 'xbed', 
 
    price: 500, 
 
    quantity: 1 
 
    }, 
 
    { 
 
    serviceCode: 'xpil', 
 
    serviceName: 'xpil', 
 
    price: 200, 
 
    quantity: 2 
 
    } 
 
]; 
 

 
// find the table body 
 
var $tableBody = $("#myTable").children("tbody"); 
 

 
// for each row of data, generate a table row 
 
tableData.forEach(function(row, index) { 
 
    var rowIndex = index + 1; 
 

 
    $tableBody.append("<tr>" + 
 
    "<td><input type='text' id='service_code_" + rowIndex + "' value='" + row.serviceCode + "' /></td>" + 
 
    "<td><input type='text' id='service_name_" + rowIndex + "' value='" + row.serviceName + "' /></td>" + 
 
    "<td><input type='text' class='price' id='price_display_" + rowIndex + "' value='" + row.price + "' /></td>" + 
 
    "<td><input type='text' class='qty' id='qty_display_" + rowIndex + "' value='" + row.quantity + "' /></td>" + 
 
    "<td><input type='text' class='total' id='sub_display_" + rowIndex + "' value='" + row.price * row.quantity + "' /></td>" + 
 
    "</tr>"); 
 
    
 
}); 
 

 
// wire up keyboard handlers 
 
$(".price, .qty").on("keyup", function(evt) { 
 
    var $row = $(evt.target).closest("tr"), 
 
     price = $row.find(".price").first().val(), 
 
     qty = $row.find(".qty").first().val(), 
 
     $total = $row.find(".total").first(); 
 
    
 
    $total.val(price * qty); 
 
});

table { 
 
    font-family: 'Arial', sans-serif; 
 
} 
 

 
input { 
 
    width: 8em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="myTable"> 
 
    <thead> 
 
    <tr> 
 
     <th>Service code</th> 
 
     <th>Service name</th> 
 
     <th>Price</th> 
 
     <th>Quantity</th> 
 
     <th>Total</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    </tbody> 
 
</table>

Answer 2

変更IDとそのコードを試してみてください。

$(document).on('keyup', '.qty_display, .price_display', function(){ 
    var row = $(this).parent('tr'); 
    var pri = row.find('.qty_display').val(); 
    var q = row.find('.price_display').val(); 
    var tots = pri*q; 

    row.find('.sub_display').val(tots); 
}); 

あなたが唯一の正しい値を持つ行が必要に変更されますそのように。

Answer 3

"tots"変数値を記録しようとしていますか？

**THEN** 

make sure must have unique "#sub_display" id to display the value else it only appears on the first raw 

YES NOの場合

**THEN** 

    try to log the second raw object eg:-console.log(this)