jQuery - Chrome & Firefox OK - Проводник не работает?

Question

Я создаю веб-приложение с Django, которое генерирует счета. Каждый счет-фактура содержит список отдельных позиций, причем каждая позиция имеет общее количество. Затем есть промежуточные итоги, налог и итоговая сумма. Значения промежуточных итогов, налога и общей суммы рассчитываются на лету с использованием 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-код недействителен: у вас не должно быть более одного элемента на странице с одинаковым идентификатором.Если вы это сделаете и попытаетесь выбрать на основе идентификатора, вы получите противоречивые результаты между браузерами (как вы уже видели).

Вам необходим неидентифицированный метод для выбора ячеек itemPrice.Один из способов - сделать itemPrice классом, а не идентификатором - в этом случае класс не будет использоваться для применения каких-либо стилей, он предназначен исключительно для простого выбора из вашего кода (в случае, если вы еще не знали оэто совершенно законно присвоить несколько классов одному элементу, сказав 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.