jQuery - Chrome & Firefox OK - Explorer messes up?

I am building a webapp with Django which generates invoices. Each invoice has a list of line items with each line item having a total. Then there is a Subtotal, a Tax, and a Grand total line. The Subtotal, Tax, and Grand Total values are all calculated on the fly using jQuery. This works nicely in Chrom开发者_JAVA技巧e and Firefox, but fails in Explorer. In Explorer, only the first line item is picked up.

Here's my little jQuery script:

<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>

And here is the chunk of HTML which has the line items and totals:

 <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>

The values of 630.00 and 75.00 are brought into the template from the views.py function that calls this template.

Any ideas what is going on and why IE is only using the first line item?

Thanks

Your HTML is invalid: you're not supposed to have more than one element on the page with the same ID. If you do, and you try to select based on ID, you'll get inconsistent results between browsers (as you have seen).

You need a non-ID method of selected the itemPrice cells. One way is to make itemPrice a class rather than an ID - in this case the class wouldn't be used to apply any styles, it is solely for easy selection from your code (in case you weren't already of aware of it, it is perfectly legal to assign multiple classes to the same element by saying 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>

Another way to do it might be to use a selector that takes the last child of each TR.