Математические действия со значениями в таблице

[LEXAlForpostl]

Здравствуйте.
Имеется в наличии вот такая табличка:

<table id="table" class="table table-hover table-mc-light-blue">
<thead>
<tr>

<th>Цена</th>
<th></th>
<th>Сумма заказа</th>
</tr>
</thead>
<tbody>
<tr>
<form action="/items.html" method="POST">
<td data-title="Price1" class="price">1 </td>
<td class="q1"><input class="q" type="number" min="2" step="2" name="quantity" style="width:70px;" value="2"></td>
<td class="sum"></td>
<td><input type="image" src="/templates/buy.png"></td>
<input type="hidden" name="item" value="5">
</form>
</tr>
<tr>
<form action="/items.html" method="POST">
<td data-title="Price1" class="price">3 </td>
<td class="q1"><input class="q" type="number" min="2" step="2" name="quantity" style="width:70px;" value="2"></td>
<td class="sum"></td>
<td><input type="image" src="/templates/buy.png"></td>
<input type="hidden" name="item" value="4">
</form>
</tr>
</tbody>
</table>

Подскажите, пожалуйста, как в <td id="sum"> отображать произведение из колонки price и значение q, причем если значение q меняется, то и отображаемое значение в sum также, чтобы менялось автоматически.

Буду благодарен за помощь!

 

[v0ff]

ну тут очень просто, jquery или какойнить js прикрутить который будет по onChange в поле name="quantity" срабатывать.

долгий путь(лехче переделать на
вытаскиваем значение прайса
var price = $("td.price").html();
вытаскиваем значение (можно в функцию ввести для ускорения и оптимизации функции)
var q = $('input.q').val();
перемножаем
var rez = price * q;
и засовываем, с округлением до 2-х символов.
$('#sum').html( parseInt(rez).toFixed(2) )


должно получится что-то типо такого:
$("input.q").keyup(function () {
$('#sum').html($('input.q').val() * $('td.price').html());
});

 

[LEXAlForpostl]

Не пинайте сильно, пожалуйста.
Вставил код

$("input.q").keyup(function () {
$('#sum').html($('input.q').val() * $('td.price').html());
});

Не работает. Самое интересное, а как же код поймет что с чем складывать. Ведь у него несколько полей с id price и q

 

[Absolute]

$("input.q").keyup(function () {
$('#sum').html($('input.q').val() * $('td.price').html());
});

Не работает. Самое интересное, а как же код поймет что с чем складывать. Ведь у него несколько полей с id price и q

в вашем коде со значением sum нет атрибута id - есть атрибут class с таким значением.
При условии, что q1 - уникальный класс и используется только для ячеек с количеством в данной таблице:

$(document).ready(function(){
  function sum(){
    $('.q1').each(function(){
      var $this = $(this);
      var price = parseFloat($this.siblings('.price').text());
      var quantity = parseFloat($this.children('.q').val());
      $this.siblings('.sum').text(price*quantity);
    });
  }
  sum();
  $('.q').on('input', sum);
});

 

[LEXAlForpostl]

Подскажите, пожалуйста, как сделать так, чтобы в

<input class="q" type="number" min="2" step="2" name="quantity"  style="width:70px;" value="2">

Отображались только четные числа, т.е. если захотел вручную ввести нечетное число, оно автоматически повышалось на +1.
Благодарю!

 

[Absolute]

Подскажите, пожалуйста, как сделать так, чтобы в

<input class="q" type="number" min="2" step="2" name="quantity"  style="width:70px;" value="2">

Отображались только четные числа, т.е. если захотел вручную ввести нечетное число, оно автоматически повышалось на +1.
Благодарю!

$(document).ready(function(){
  function sum(){
    if(this.value%2 !== 0){
      this.value = ~~this.value + 1;
    }
    $('.q1').each(function(){
      var $this = $(this);
      var price = parseFloat($this.siblings('.price').text());
      var quantity = parseFloat($this.children('.q').val());
      $this.siblings('.sum').text(price*quantity);
    });
  }
  sum();
  $('.q').on('input', sum);
});

 

[LEXAlForpostl]

$(document).ready(function(){
  function sum(){
    if(this.value%2 !== 0){
      this.value = ~~this.value + 1;
    }
    $('.q1').each(function(){
      var $this = $(this);
      var price = parseFloat($this.siblings('.price').text());
      var quantity = parseFloat($this.children('.q').val());
      $this.siblings('.sum').text(price*quantity);
    });
  }
  sum();
  $('.q').on('input', sum);
});

Только есть минус.
31 он меняет на 42(((
Можно сделать, чтобы только разряды единиц округлялись до четного?

 

[Absolute]

Только есть минус.
31 он меняет на 42(((

Он сначала меняет 3 на 4, а потом уже 41 на 42
По change тогда
$('.q').on('change', sum);

или setTimeout

$(document).ready(function(){
  function sum(){
    $('.q1').each(function(){
      var $this = $(this);
      var price = parseFloat($this.siblings('.price').text());
      var quantity = parseFloat($this.children('.q').val());
      $this.siblings('.sum').text(price*quantity);
    });
  }
  sum();
  $('.q').on('input', function(){
    var th = this;
    setTimeout(function(){
     if(th.value%2 !== 0){
      th.value = ~~th.value + 1;
    }
      sum();
    }, 3000); // тут время в мс
  });
});