1<!DOCTYPE html>
2<html>
3<head>
4<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
5 <meta charset="utf-8">
6 <title>Example</title>
7</head>
8<body>
9 <table>
10 <thead>
11 <tr>
12 <th>Quantity</th>
13 <th>Price</th>
14 <th>Total</th>
15 </tr>
16 </thead>
17 <tbody>
18 <tr>
19 <td><input type="text" class="qty"></td>
20 <td><input type="text" class="price"></td>
21 <td><input type="text" class="total" disabled></td>
22 </tr>
23 <!-- ...and so on... -->
24 </tbody>
25 </table>
26<script>
27 (function() {
28 "use strict";
29
30 $("table").on("change", "input", function() {
31 var row = $(this).closest("tr");
32 var qty = parseFloat(row.find(".qty").val());
33 var price = parseFloat(row.find(".price").val());
34 var total = qty * price;
35 row.find(".total").val(isNaN(total) ? "" : total);
36 });
37 })();
38</script>
39</body>
40</html>