データ値で入力値を掛けて、結果を合計する

Question

私は9つの入力テキストを持っており、入力値に各入力のデータ値を乗算し、結果を合計してdivにirを表示する必要があります。

入力値-1 Xデータ値-1
+
入力値-2 Xデータ値-2
+
入力値-3 Xデータ値-3

... 9

私のコードまでとどこまで私が得ている：

DEMO

$(function() { 
 
     $('.insert').on('keydown', '.quantity-input', function(e){-1!==$.inArray(e.keyCode,[46,8,9,27,13,110,190])||/65|67|86|88/.test(e.keyCode)&&(!0===e.ctrlKey||!0===e.metaKey)||35<=e.keyCode&&40>=e.keyCode||(e.shiftKey||48>e.keyCode||57<e.keyCode)&&(96>e.keyCode||105<e.keyCode)&&e.preventDefault()}); 
 
    }) 
 
    
 

 
$(".quantity-input").change(function(){ 
 
if($(this).val()=="") $(this).val(0); 
 
    var total = 0; 
 
    $(".quantity-input").each(function(index,element){ 
 
    if ($(element).val()) { 
 
     total+= parseInt($(element).val()); 
 
    } 
 
    }); 
 
    $(".subtotal strong").text(total); 
 
}); 
 

 
$('.quantity-input').keyup(function(event) { 
 
\t \t var b = $(this).val(); 
 
\t \t var c = $(this).data('value'); 
 
\t \t var d = b * c 
 
\t \t alert(d) 
 
\t });

table 
 
{ 
 
    width: 100%; 
 
} 
 
table th 
 
{ 
 
    text-align: center; 
 
} 
 
table td 
 
{ 
 
    padding: 10px; 
 
    width: 10%; 
 
} 
 
table td input 
 
{ 
 
    width: 100%; 
 
    text-align: center; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<table> 
 
    <thead> 
 
    <tr> 
 
     <th>1</th> 
 
     <th>2</th> 
 
     <th>3</th> 
 
     <th>4</th> 
 
     <th>5</th> 
 
     <th>6</th> 
 
     <th>7</th> 
 
     <th>8</th> 
 
     <th>9</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td> 
 
     <td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td> 
 
     <td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td> 
 
     <td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td> 
 
     <td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td> 
 
     <td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td> 
 
     <td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td> 
 
     <td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td> 
 
     <td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="subtotal" colspan="9">subtotal: <strong>00</strong></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="total" colspan="9">Total: <strong>00</strong></td> 
 
    </tr> 
 
    </tbody> 
 
</table>