如何制作一个JavaScript函数，处理多组输入，以相同的方式进行数学处理

我做了这张桌子： 看起来是我想要的，但它不像我想要的那样工作。目前，每个输入字段都有自己的名称，因此在JavaScript中有自己的变量

我想要的是有一个Javascript函数，其中包含的变量最少。每行发生的事情都是一样的。最后一行“u-værdi”给出了1/s“等值线”总和的结果。所以我想我可以让javascript看起来像这样：

function isolansBeregn () {
  var calc1 = document.getElementById('lambda').value;
  var calc2 = document.getElementById('tykkelse').value;
  var result = calc2/calc1;
  var numb = result;
  numb = numb.toFixed(0);
  document.getElementById('isolans').innerHTML = numb;
  var uVærdi = 1/result;
  uVærdi = uVærdi.toFixed(3);
  document.getElementById('uværdi').innerHTML = uVærdi;}

它可以工作，但仅适用于第一行输入。即使我给下一行相同的id，当我输入数字时，什么也不会发生。。。。现在看起来是这样的：

function isolansBeregn () {
  var calc1 = document.getElementById('lambda').value;
  var calc2 = document.getElementById('tykkelse').value;
  var result = calc2/calc1;
  var numb = result;
  numb = numb.toFixed(0);
  document.getElementById('isolans').innerHTML = numb;
  var uVærdi = 1/result;
  uVærdi = uVærdi.toFixed(3);
  document.getElementById('uværdi').innerHTML = uVærdi;}

HTML

这感觉太过分了

这对我来说是个问题，因为我希望用户能够添加另一行，看起来与其他行完全一样，使用一个不介意的JavaScript

---

提前谢谢你

最小修改版本为：

• 将

  id

  s更改为

  name

  s（除了

  uværdi

  ）
• 换衣服

  onchange="isolansBeregn()"
  

  到
  因此，它将对发生更改的元素的引用传递到函数中

然后，我们可以从该元素中找到我们所在的行，从而找到该行中的其他

input

元素：

function isolansBeregn(input) {
    // Update this row
    var row = $(input).closest("tr");
    var calc1 = row.find('[name=lambda]').val();    // Probably worth converting these to number explicitly
    var calc2 = row.find('[name=tykkelse]').val();
    var result = Math.round(calc2 / calc1);         // Added rounding at the number rather than text level
    row.find('[name=isolans]').html(result).data("result", result); // ** see below

    // Get the sum of all the results
    var sum = $("[name=isolans"]).get().reduce(function(s, el) {
        return s + $(el).data("result");
    }, 0);
    var uVærdi = 1 / sum;
    uVærdi = uVærdi.toFixed(3);
    $('#uværd').html(uVærdi); // Again, perhaps .text()
}

Re my**请参见下文：我们将数字显示为文本，但稍后需要它作为一个数字，因此我们使用jQuery的

数据

功能将其存储为一个数字。我们可以使用文本将其重新分析为一个数字，但我走了另一条路

reduce

说明：

注意：我使用jQuery是因为您标记了

jQuery

，但您的代码似乎没有在任何地方使用jQuery。没有jQuery也完全可以实现上述功能。唯一真正需要做更多工作的是

。最近的
部分


然而，这是一个很好的事件委派用例。您可以去掉所有这些
onchange=…
属性，改为在表上钩住
change
，然后使用
e.target
来知道哪个实际的
输入发生了更改。（
change
事件不会在本机冒泡，但jQuery会使其冒泡，因此事件委派可以使用它。）
请编辑您的问题并将fiddle复制到堆栈片段（工具栏按钮
）中，该堆栈片段是可运行的HTML/JS/CSS（类似于fiddles）。目前，您的问题依赖于非现场内容（因为否则我们不知道您如何调用函数）。场外资源腐败；因此，问题必须是独立的。您的小提琴有控制台错误。您应该编辑Javascript的选项，并将加载类型设置为
No wrap-in
。在那之后，对我来说，小提琴工作了，它会更新每一行。@Lulyluu:那是因为小提琴在重复计算逻辑。（小提琴中的代码与上面的代码不同。）OP的目标是消除重复。好吧，我一定误解了上面的代码只适用于第一行。@lulylu谢谢。我不知道为什么我没有工作。我标记jquery是因为我对使用它的解决方案持开放态度，但如果它是我问题的一个直接元素，也许我应该只标记它？T.J.你就是那个男人！它起作用了。我为我所有的小错误道歉。。几周前我开始编写代码，我刚刚意识到JavaScript比HTML和CSS更能帮助你：）@CasperHougaard：如果你愿意使用它，标记是正确的，所以你在这方面做得很好。很高兴这有帮助！
onchange="isolansBeregn(this)"

function isolansBeregn(input) {
    // Update this row
    var row = $(input).closest("tr");
    var calc1 = row.find('[name=lambda]').val();    // Probably worth converting these to number explicitly
    var calc2 = row.find('[name=tykkelse]').val();
    var result = Math.round(calc2 / calc1);         // Added rounding at the number rather than text level
    row.find('[name=isolans]').html(result).data("result", result); // ** see below

    // Get the sum of all the results
    var sum = $("[name=isolans"]).get().reduce(function(s, el) {
        return s + $(el).data("result");
    }, 0);
    var uVærdi = 1 / sum;
    uVærdi = uVærdi.toFixed(3);
    $('#uværd').html(uVærdi); // Again, perhaps .text()
}