jQuery - Chrome 和 Chrome Firefox OK - 资源管理器搞砸了？

Question

我正在使用 Django 构建一个生成发票的 Web 应用程序。每张发票都有一个行项目列表，每个行项目都有一个总计。然后是小计、税收和总计行。小计、税金和总计值都是使用 jQuery 即时计算的。这在 Chrome 和 Firefox 中运行良好，但在 Explorer 中失败。在资源管理器中，仅选取第一个行项目。

这是我的小 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 进行选择，您将在浏览器之间得到不一致的结果（如您所见）。

您需要使用非 ID 方法来选择 itemPrice 单元格。一种方法是使 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 的最后一个孩子。