Question

我正在使用Django构建一个生成发票的webapp。每张发票都有一个订单项列表，每个订单项都有一个总计。然后是小计，税和总计。使用jQuery即时计算小计，税和总计。这在Chrome和Firefox中运行良好，但在资源管理器中失败。在资源管理器中，仅拾取第一个订单项。

这是我的小jQuery脚本：

<script type="text/javascript">
  $(document).ready(function() {
    var tot = 0;
    $('td#itemPrice').each(function() {
      tot = tot + parseFloat($(this).html());
      });
    $("td#sub_total_results").html(tot.toFixed(2));
    var gst = document.getElementById("gst").innerHTML;
    var tax = tot * parseFloat(gst);
    $("td#tax_results").html(tax.toFixed(2));
    var grand = tot + tax;
    $("td#grand_total_results").html("$" + grand.toFixed(2));
  });
</script>

以下是包含订单项和总计的HTML大块：

 <table class="lineItems_Container">
  <tr><td class="item_header" width=500 align=left>Item</td><td class="item_header" width=100 align=right>Price</td></tr>

  <tr>
    <td class="item_row">Labour</td>
    <td class="item_row" id="itemPrice" align=right>630.00</td>
  </tr>

  <tr>
    <td class="item_row">Product</td>
    <td class="item_row" id="itemPrice" align=right>75.00</td>
  </tr>

</table>
<br>
<div id="totals" style="float: right; width=200px;">
  <table class="totals_container">
    <tr>
<td class="totals_td" width=75 id="sub_total" style="font-size: 13px;">Sub Total:</td>
  <td class="totals_td" width=100 id="sub_total_results" align=right></td>
    </tr>
    <tr>
  <td class="totals_td" id="tax" style="font-size: 13px;">Tax:</td>
  <td class="totals_td"id="tax_results" align=right></td>
    </tr>

    <tr>
  <td class="totals_td" id="grand_total" style="font-size: 16px;">TOTAL:</td>
  <td class="totals_td" id="grand_total_results" align=right style="font-size: 16px;"></td>
    </tr>
  </table>
</div>

630.00和75.00的值从调用此模板的views.py函数进入模板。

任何想法是什么以及为什么IE仅使用第一个订单项？

由于

Answer 1

您的HTML无效：您不应该在页面上具有多个具有相同ID的元素。如果你这样做，并且你尝试根据ID进行选择，那么浏览器之间的结果会不一致（如你所见）。

您需要选择itemPrice单元格的非ID方法。一种方法是使itemPrice成为一个类而不是一个ID - 在这种情况下，该类不会用于应用任何样式，它只是为了方便您从代码中选择（如果您还没有意识到这一点，通过说class="class1 class2 class3 etc"）将多个类分配给同一个元素是完全合法的：

<tr>
  <td class="item_row">Labour</td>
  <td class="item_row itemPrice" align=right>630.00</td>
</tr>
<tr>
  <td class="item_row">Product</td>
  <td class="item_row itemPrice" align=right>75.00</td>
</tr> 

<script>
// select by class instead of ID
$('td.itemPrice').each(function() {
  ...
});
</script>

另一种方法可能是使用一个选择器来获取每个TR的最后一个孩子。

jQuery - Chrome＆amp; Firefox OK - 资源管理器搞砸了？

1 个答案: