划分<td>通过输入值

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

本文关键字：输入 td lt 划分 gt      更新时间：2023-09-26

我被我试图解决的当前项目难住了。我可以在控制台中打印出我想要的确切结果，但我不知道如何将这些结果插入表中各自的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，以便实时更新。

你可以在这里看到它的Fiddle，结果打印到控制台。如何使权重列中的每个单元格都更新？

提前感谢您的帮助！

问题是在输入值之前更新单元格，这导致"无限"被创建了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

要解决这个问题，您必须编辑HTML和JS代码。您应该将原始值存储在data属性中，然后使用jquery-each函数的value参数在循环中打印它。这是你编辑的小提琴，希望对你有所帮助！

http://jsfiddle.net/ch1qui/LoLrotkn/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/

相关文章：