Вычисление значения последней ячейки столбца - включает строки динамической таблицы

Question

Рассмотрим следующую таблицу HTML:

<table id="myTable1">
    <tr id="TR1">
        <td><input type="text" id="quantity1" name="quantity1" /></td>
        <td><input type="text" id="weight1" name="weight1" /></td>
        <td><input type="text" id="sub_total1" name="sub_total1" /></td>
    </tr>
</table>

Здесь я пытаюсь выполнить то, что мне нужно обновить значение для поля sub_total в каждой строке на основе значений, введенных в количество и вес полей в одной строке каждый раз keyup () срабатывает.

Теперь я считаю, что это было бы очень управляемым заданием, если бы таблица, над которой я работаю, была только статической.Но включение динамического добавления строк таблицы вызвало у меня проблемы.

---

JQuery для динамического добавления строк:

$(document).ready(function() {

var counter = 2;

$("#addButton").click(function() {

    $('#myTable1 tr:last').after(
        '<tr id="TR"><td><input type="text" name="quantity' + counter + 
            '" id="quantity' + counter + '" value=""></input></td>' +

        '<td><input type="text" name="weight' + counter + 
            '" id="weight' + counter + '" value=""></input></td>' +

        '<td><input type="text" name="sub_total' + counter + 
            '" id="sub_total' + counter + '" value=""></input></td></tr>'
    );

    counter++;
});
});

---

Здесь у нас есть формула, которая будет использоваться в вычислениях для промежуточного итога :

var sub_total  = ((170 * first 10 kilos) + (70 * the remaining weight)) * (quantity);

Итак, учитывая значения выборки: количество = 10 вес = 15 , мы должны иметь

var sub_total  = ((170 * 10) + (70 * 5)) * (10);

---

У меня для начала есть следующее, но я не совсем уверен, что поместить в эти функции

$('#myTable1 input[id^=\'quantity\'], #myTable1 input[id^=\'weight\']').live('keyup',function() {

    $('#myTable1 input[id^=\'quantity\'], #myTable1 input[id^=\'weight\']').each(function(index, value) {
    });
});

Answer 1

Вы можете использовать closest () , чтобы соответствовать строке родительской таблицы измененного элемента. Оттуда легче найти элементы quantity, weight и sub_total:

$("#myTable1 [id^=quantity], #myTable1 [id^=weight]").live("keyup", function() {
    var $tr = $(this).closest("tr");
    var quantity = parseInt($("[id^=quantity]", $tr).val());
    var weight = parseInt($("[id^=weight]", $tr).val());

    var firstTen;
    if (weight <= 10) {
        firstTen = weight;
        weight = 0;
    } else {
        firstTen = 10;
        weight -= 10;
    }

    $("[id^=sub_total]", $tr).val((170 * firstTen + 70 * weight) * quantity);
});

Answer 2

Дайте другое имя класса для другого поля ввода, например quantity weight sub_total и попробуйте это

    $("#addButton").click(function() {

          $('#myTable1 tr:last').after(
          '<tr id="TR' + counter +'"><td><input type="text" class="quantity" name="quantity' + counter +
            '" id="quantity' + counter + '" value=""></input></td>' +

            '<td><input type="text" class="weight" name="weight' + counter +
            '" id="weight' + counter + '" value=""></input></td>' +

            '<td><input type="text" class="sub_total" name="sub_total' + counter +
            '" id="sub_total' + counter + '" value=""></input></td></tr>'
        );

          counter++;
          $('tr').each(function(){
            var qnty = 0
            var weight = 0;
            $('input.quantity', $(this)).keyup(function(){
              qnty = Number($(this).val());
              if(qnty != 0 && weight != 0){
                newRowCalculation($(this).parent().parent('tr'), qnty, weight);
              }

            });
            $('input.weight', $(this)).keyup(function(){
              weight = Number($(this).val());
              if(qnty != 0 && weight != 0){
                newRowCalculation($(this).parent().parent('tr'), qnty, weight);
              }
            });                        
          });

function newRowCalculation(elem, qnty, weight){
        if(weight > 10){
          var extraWeight = Number(weight - 10);
          var subTotal = (170 * 10 + 70 * extraWeight) * qnty;
          $('.sub_total', $(elem)).val(subTotal);
        }
        else{
          var subTotal = (170 * weight) * qnty;
          $('.sub_total', $(elem)).val(subTotal);
        }

      }

Answer 3

Если ваша проблема в том, что с динамическими полями ничего не происходит, очевидно, что событие keyup не связано.

Свяжите событие, используя .bind (), или вызовите метод do on on keyup внутри динамически сгенерированногокод.

Answer 4

var input_cols = $(
    '<tr id="TR"><td><input type="text" name="quantity' + counter + 
        '" id="quantity' + counter + '" value=""></input></td>' +

    '<td><input type="text" name="weight' + counter + 
        '" id="weight' + counter + '" value=""></input></td>' +

    '<td><input type="text" name="sub_total' + counter + 
        '" id="sub_total' + counter + '" value=""></input></td></tr>'
).find('input[name=quantity], input[name=weight]').keyup(function() { updateTotal(this); });

$('#myTable1 tr:last').after(input_cols);

function updateTotal(el) {
  el = el.closest('tr');
  weight = el.find('input[name=weight]').val();
  quantity = el.find('input[name=quantity]').val();
  el.find('input[name=sub_total]').val( quantiy * weight .... put your formula here);
}