私はあなたのコードをリファクタリングしました。私の例では、私たちは製品のリストを持っています。それは本当に重要ではありません、あなたはここで一つの製品を、またはあなたが望むだけ多くのものを持つことができます。学習目的のためには、アイテムのテーブルを扱う方が良いです。
まず、disabled属性を使用せず、readonlyを使用します。 disabledのKey-Valueはサーバーに送信されないため、非常に重要です。入力の変更をブロックする場合は、readonlyを使用してください。次に、=true値を属性に渡す必要はありません。
<input type="text" disabled="true"> // bad
<input type="text" readonly> // ok
もう一つは、その属性idがdocumentごとにユニークであり、我々は一つだけを持つことができます。 MDNを詳しく読んでください。
idグローバル属性は、文書全体で 一意でなければならない固有の識別子（ID）を定義します。その目的は、フラグメント識別子を使用してリンクするとき、スクリプトを書くとき、または （CSSを使用するとき）のときに要素 を識別することです。
私の例ではjQueryはありません。純粋なjavascriptを最初に習得する必要があります。
calcには、値のタイプを変更する必要があります。それらを入力から読み取ると、そのタイプはStringです。Numberに変換する必要があります。我々の場合、parseInt()関数を使用します。浮動小数点数を期待するときは、parseFloat()を使用する方が良いでしょう。
私のコメントを読んで、何が起こっているのかをよりよく理解してください。あなたは混乱がある場合は必ず尋ねてください。
var table = document.getElementById('tshirtTable');
table.addEventListener("change", function(e) {
// If we are not changing these elements we quit
if (e.target.name !== 'quantity' && e.target.name !== 'each-price') {
return;
}
// Let's check what is id of our element
// We store our id in <tr id="..."
// To access tr, we must find tr by using .closest function
var tr = e.target.closest('tr');
var productId = tr.id;
var quantityValue = tr.querySelector('.quantity').value;
var eachPriceValue = tr.querySelector('.each-price').value;
var totalPriceValue = tr.querySelector('.total-price').value;
// Here is important part, we must parse values as type Number, because currently they are type String
tr.querySelector('.total-price').value = (parseInt(quantityValue) * parseInt(eachPriceValue)).toFixed(2);
});
<table border="1" id="tshirtTable" style="float:left">
<thead>
<th>Name</th>
<th>Quantity</th>
<th>Price/Each</th>
<th>Total Price</th>
</thead>
<tbody>
<tr id="1">
<td>Burundi T-Shirt</td>
<td><select class="quantity" name="quantity">
<option value="0" selected>0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td><input class="each-price" type="text" name="each-price" value="15"></td>
<td><input class="total-price" name="total-price" type="text" readonly></td>
</tr>
<tr id="2">
<td>Burundi Skirt</td>
<td><select class="quantity" name="quantity">
<option value="0" selected>0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td><input class="each-price" type="text" name="each-price" value="25"></td>
<td><input class="total-price" name="total-price" type="text" readonly></td>
</tr>
<tr id="3">
<td>Burundi Mask</td>
<td><select class="quantity" name="quantity">
<option value="0" selected>0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td><input class="each-price" type="text" name="each-price" value="30"></td>
<td><input class="total-price" name="total-price" type="text" readonly></td>
</tr>
</tbody>
</table>
あなたが把握することはたくさんあるようです。人々が自分の時間をかけて試して助けてくれるときの答えを受け入れる方法のように。 http://stackoverflow.com/users/7617740/conor – sweaver2112
申し訳ありませんが、私はあなたがどんなところに来ているのか、大したことはありませんか？ – Conor
助けていただいた回答をアップアップし、あなたの問題を解決した回答を受け入れることは良い礼儀です。手元の問題について：