我是jquery的新人,可能我的剧本编码不好,但是我正在为大学制作一个在线电影项目,并且不知道我的预订系统有什么问题。实际上,我有一张表格,包括票价,价格和数量,我想根据用户的选择更新小计和总价。 不幸的是,我在这里研究了其他答案和一些教程,但它们都不适用于我。 这是我的html表:
<table id="myTable" class="table table-bordered">
<thead>
<tr>
<th>Ticket</th>
<th>Price</th>
<th>Quantity</th>
<th><span id="subtotal" class="subtotal">Subtotal</span></th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="2"></td>
<td id="total"><span>TOTAL</span></td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Adult</td>
<td><span id="price" class="price">£8.25</span></td>
<td>
<select class="form-control" id="qty" name="qty">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</td>
<td><span id="subtotal" class="subtotal">£0</span></td>
</tr>
<tr>
<td>Junior</td>
<td><span id="price" class="price">£6.75</span></td>
<td>
<select class="form-control" name="qty">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</td>
<td><span id="subtotal" class="subtotal">£0</span></td>
</tr>
<tr>
<td>Senior</td>
<td><span id="price" class="price">£6.75</span></td>
<td>
<select class="form-control" name="qty">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</td>
<td><span id="subtotal" class="subtotal">£0</span></td>
</tr>
<tr>
<td>Student</td>
<td><span id="price" class="price">£6.75</span> </td>
<td>
<select class="form-control" name="qty">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</td>
<td><span id="subtotal" class="subtotal">£0</span></td>
</tr>
</tbody>
</table>
这是我的js脚本:
$(document).ready(function () {
update_amounts();
$('.qty').change(function () {
update_amounts();
});
});
function update_amounts()
{
var sum = 0.0;
$('#myTable > tbody > tr').each(function () {
var qty = $(this).find('option:selected').val();
var price = $(this).find('.price').val();
var amount = (qty*price)
sum+=amount;
$(this).find('.subtotal').text(''+amount);
});
//just update the total to sum
$('.total').text(sum);
}
如果有人能帮助我会很棒。 非常感谢你提前。
答案 0 :(得分:2)
这是一个工作小提琴:http://jsfiddle.net/ciscoheat/4hrx38nf/
$(document).ready(function () {
update_amounts();
// Fix: Invalid selector for the select fields
$('select[name=qty]').change(update_amounts);
});
function update_amounts() {
var sum = 0.0;
$('#myTable > tbody > tr').each(function () {
var qty = $(this).find('option:selected').val();
// Fix: price is in text, not in a form field
// and it must be cleaned from the pound sign
var price = $(this).find('.price').text().replace(/[^\d.]/, '');
var amount = (qty * price);
sum += amount;
$(this).find('.subtotal').text('£' + amount);
});
//just update the total to sum
$('.total').text('£' + sum);
}
我还在tfoot
中进行了HTML修复:
<tfoot>
<tr>
<td colspan="2"></td>
<td><span>TOTAL</span></td>
<!-- Fix: Moved the total field to the right place -->
<td class="total"></td>
</tr>
</tfoot>
所以现在它有效,但仍有一些问题。 id
个属性必须是唯一的,price
和subtotal
有多个属性。我建议删除它们。