Javascriptを使用してテーブル行に計算された合計と割引を取得する必要があります

Question

次の表に合計額と割引額を計算する必要があります。

<tbody id="generate_invoice_table">      
    <tr> 
    <td>16</td> 
    <td>Glass Polish Normal</td> 
    <td><input type="text" class="form-control text-right quantity" value="1"></td> 
    <td class="price">8000.00</td><td><input type="text" class="form-control text-right discount"></td> 
    <td><input type="text" disabled="" class="form-control text-right amount"></td> 
    <td><input type="checkbox" checked="" name="check-invoice"></td> 
    </tr> 
    </tbody> 

基本的に、数量を入力してから割引を入力し、最後の入力ボックスに金額を表示します。 Javascriptのは...私はtrs.findは関数ではありませんメッセージを取得するには、下記のvar t=と

$('#invoice').delegate('.quantity,.price,.discount', 'keyup', function() { 
      var t = document.getElementById("generate_invoice_table");//find table data 
      var trs = t.getElementsByTagName("tr"); 
      var qty = trs.find('.quantity').val(); 
      var price = trs.find('.price').val(); 
      var dis = trs.find('.discount').val(); 
      varamt = (qty * price) - (qty * price * dis)/100; 
      trs.find('.amount').val(amt); 
      total();//calculate total and show after the invoice table 
     }); 


    }); 
    function total() { 
     var t = 0; 
     $('.amount').each(function (i, e) { 
      varamt = $(this).val() - 0; 
      t += amt; 
     }); 
     $('.total').html(t); 
    } 

Answer 1

削除行と次の行の聖霊降臨祭にこのコードを交換しようとしている。

var trs = $("#generate_invoice_table tr"); 

Answer 2

通りでした純粋なJSまたはjQueryを使用するかどうかをチョーザーに伝えると言いました。下の例では、割引と数量の入力にはonkeyupイベントがあります。イベントハンドラーrecalc()価格、数量および割引はdocument.getElementByIdセレクターを使用して読み取られます。金額が計算され、適切な入力に挿入されます。

amt私は変更をせずに取った。

function recalc() { 
 

 
    var price = Number(document.getElementById('price').innerText); 
 
    var quantity = Number(document.getElementById('quantity').value); 
 
    var discount = Number(document.getElementById('discount').value); 
 
    
 
    var total = ''; 
 
    if (price && quantity) { 
 
    total = discount ? ((quantity * price) - (quantity * price * discount)/100) : (quantity * price); 
 
    } 
 
    
 
    document.getElementById('amount').value = total; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<tbody id="generate_invoice_table">      
 
    <tr> 
 
    <td>16</td> 
 
    <td>Glass Polish Normal</td> 
 
    <td> 
 
     <input type="text" id="quantity" class="form-control text-right quantity" value="1" onkeyup="recalc()"> 
 
    </td> 
 
    <td class="price"> 
 
     <span id="price">8000.00</span> 
 
    </td> 
 
    <td> 
 
     <input type="text" id="discount" class="form-control text-right discount" onkeyup="recalc()"> 
 
     </td> 
 
    <td> 
 
     <input type="text" disabled="" id="amount" class="form-control text-right amount"> 
 
    </td> 
 
    <td> 
 
     <input type="checkbox" checked="" name="check-invoice"> 
 
    </td> 
 
    </tr> 
 
</tbody>

希望はこれを使用すると、ランダムにネイティブメソッドでjQueryのメソッドを混在させるときに何が起こるかだ