Разделение столбца <td> на входное значение

Question

Я в тупике от этого текущего проекта, который я пытаюсь решить. Я могу распечатать точные результаты, которые мне нужны в консоли, однако я не могу понять, как вставить их обратно в их соответствующие tds в таблице.

var calc = $('.calc'), 
    odds = $('.weight'); 

$(document).on('keyup keydown', '.calc', function(e){ 
    var curVal = calc.val(); 

    $(document).find('.weight').each(function(){ 
     var oddsVal = ($(this).text()/curVal); 
     console.log(oddsVal); 
    }); 
}); 

Я пытаюсь разделить текст в каждой ячейке столбца веса с помощью input.calc в то время как пользователь вводит данные на вход, так что он обновляет в прямом эфире.

see a Fiddle of it here, с результатами печати на консоль. Как я могу сделать так, чтобы каждая ячейка в столбце весов обновлялась?

Заранее благодарим за вашу помощь!

Answer 1

Проблема в том, что ячейки обновляются до того, как значение вводится на вход, что приводит к созданию «Бесконечности» 4 раза. Вы даже можете увидеть его в своем консольном журнале.

Вместо этого перед выполнением функции убедитесь, что есть значение в calc.

Кроме того, если вы повторно меняете поле calc, он будет выполнять новый расчет на основе вновь замещаемых значений, что не похоже на правильное поведение. Таким образом, вместо того, захватить исходные значения при загрузке страницы и использовать их в расчет:

var originalWeights = getOriginalWeights(); 

function getOriginalWeights() { 
    var weights = []; 
    $('.weight').each(function(index) { 
    weights[index] = $(this).text(); 
    }); 
    return weights; 
} 

$(document).on('keyup keydown', '.calc', function(e){ 
    if (!calc.val()) return; 
    var curVal = calc.val(); 

    $(document).find('.weight').each(function(index){ 
     var oddsVal = (originalWeights[index]/curVal); 
     $(this).text(oddsVal); 
    }); 
}); 

Fiddle

Answer 2

Чтобы решить эту проблему, вы должны отредактировать как HTML и JS код. Вы должны сохранить исходное значение в атрибуте data, а затем распечатать его внутри цикла, используя параметр value каждой функции jquery. Вот ваш скрипт отредактирован, надеюсь, что это поможет!

http://jsfiddle.net/ch1qui/LoLrotkn/3/

Answer 3

Вы должны удалить keydown событие из делегации событий как значение на поле ввода не будет доступно во время keydown. Кроме того, наличие keyup и keydown инициирует события одновременно, вызывая каждый блок дважды. Также вам не нужно объявлять var calc = $('.calc'), глобально, так как элемент будет доступен во время цели события в документе.

$(document).on('keyup', '.calc', function(e){ 
     var curVal = $(this).val(); 
    $('table td.weight').each(function(){ 
     var oddsVal = $(this).text()/curVal; 
     alert(oddsVal); 
    }); 
}); 

Пример: http://jsfiddle.net/LoLrotkn/4/