jQuery - Chrome浏览器和Firefox确定 - 资源管理器搞砸了？

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的最后一个孩子。