将 <td> 的列除以输入值

Question

我对我正在尝试解决的当前项目感到困惑。我能够在控制台中打印出我想要的确切结果，但是我无法弄清楚如何将这些结果插入 table.

中各自的 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

问题是单元格在输入值之前得到更新，这导致 'Infinity' 被创建 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 属性中，然后使用 jquery 每个函数的 value 参数在循环内打印它。这是您编辑的fiddle，希望对您有所帮助！

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/

将 <td> 的列除以输入值

Dividing a column of <td> by a an input value

javascript

jquery

html

calculated-columns