Как рассчитать общее количество строки в таблице при изменении количества

Question

Я пытаюсь обновить общее количество каждой строки с увеличением количества, но обновляется только одна строка. Как я могу обновить каждую строку? Как я могу добавить идентификатор в них, чтобы сделать больше динамических c? Я использую jQuery версию 2.2.4. Заранее спасибо.

function myFunction() {
  var x = document.getElementById("fname") value;
  var str = $("#artprice").val();
  $('#total').html(str * x);
}

Answer 1

В вашем коде есть несколько проблем.

• Там </div> не в том месте. Он находится вне <td> и принадлежит
• Вход #artprice находится вне структуры таблицы. Его нужно поместить в td
• В JS перед value свойством отсутствует *1013*.

Однако самая большая проблема заключается в том, что Повторите те же атрибуты id для нескольких элементов, что и для l oop, чтобы создать эти строки в HTML. id должен иметь , чтобы быть уникальным в DOM.

Чтобы исправить это, используйте общие атрибуты class для всех элементов, которые вам нужно найти, а затем используйте jQuery методы обхода DOM для их извлечения на основе текущей строки.

Также обратите внимание, что в приведенном ниже примере я использовал ненавязчивый обработчик событий. Встроенные атрибуты событий больше не являются хорошей практикой, и их следует по возможности избегать. Кроме того, я удалил встроенные атрибуты style и использовал правила во внешней таблице стилей. Оба этих подхода предпочтительны из-за принципа Разделение проблем .

После всего сказанного попробуйте следующее:

jQuery($ => {
  $('.fname').on('input', function() {  
    let $row = $(this).closest('tr');
    let price = $row.find(".artprice").val();
    $row.find('.total strong').text('$' + (this.value * price).toFixed(2));
  });
});

.media a img {
  width: 72px;
  height: 72px;
}

td.quantity {
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<table>
  <tr>
    <td class="col-sm-8 col-md-6">
      <div class="media">
        <a class="thumbnail pull-left" href="#"><img src="img/bg-img/b3.jpg" alt=""></a>
        <div class="media-body">
          <h5 class="media-heading">Title</h5>
        </div>
      </div>
    </td>
    <td class="col-sm-1 col-md-1 quantity">
      <input type="number" class="form-control fname" value="1" label="">
    </td>
    <td class="col-sm-1 col-md-1 text-center pr-01 price">
      <strong>$14.61</strong>
      <input type="hidden" class="form-control artprice" value="14.61" label="">
    </td>
    <td class="col-sm-1 col-md-1 text-center pr-01 total"><strong>$14.61</strong></td>
    <td class="col-sm-1 col-md-1">
      <div class="product" data-id="Key">
        <button type="button" class="btn btn-danger remove-from-cart">Remove</button>
      </div>
    </td>
  </tr>
    <tr>
    <td class="col-sm-8 col-md-6">
      <div class="media">
        <a class="thumbnail pull-left" href="#"><img src="img/bg-img/b3.jpg" alt=""></a>
        <div class="media-body">
          <h5 class="media-heading">Title</h5>
        </div>
      </div>
    </td>
    <td class="col-sm-1 col-md-1 quantity">
      <input type="number" class="form-control fname" value="1" label="">
    </td>
    <td class="col-sm-1 col-md-1 text-center pr-01 price">
      <strong>$57.24</strong>
      <input type="hidden" class="form-control artprice" value="57.24" label="">
    </td>
    <td class="col-sm-1 col-md-1 text-center pr-01 total"><strong>$57.24</strong></td>
    <td class="col-sm-1 col-md-1">
      <div class="product" data-id="Key">
        <button type="button" class="btn btn-danger remove-from-cart">Remove</button>
      </div>
    </td>
  </tr>
</table>

Последнее, на что следует обратить внимание, это то, что jQuery 2.2.4 сейчас стареет. Вы должны рассмотреть возможность обновления до 3.x