添加新行后为每行循环javascript函数

我在表中有一行可以被javascript复制。在第一行中，我有一个进行计算的javascript代码

复制新行后，calc javascript不适用于新行

我做错了什么

表行：

<table class="Parameter" id="new">
    <form action="ProjectParameterNewRecord.php" method="post">
        <tr>
            <td>
                <input type="text" id="Parameters" name="TypeOfOut" />
            </td>
            <td>
                <?php include "ExchangeRates.php"?>
            </td>
            </td>
            <td>
                <input id="Cost" type="number" value="" class="ee105" name="Cost" onchange="changeCost()">
            </td>
            <td>
                <input id="Amount" type="number" value="" class="ee105" name="Amount" onchange="changeAmount()">
            </td>
            <td><span id="minisum" name="minisum" onchange="changeminisum()"></span>
            </td>
            <td id="system">
                <input type="hidden" id="ParameterID" name="ParameterID"></input>
            </td>
            <td id="system">
                <input type="hidden" id="ProjectID" name="ProjectID" value="3"></input>
            </td>
            <td>
                <input type="submit" value="Submit">
            </td>

    </form>
    </tr>
</table>

谢谢：）

• 您的HTML无效。中间有一个额外的关闭<代码> <代码>。您还需要将

  表单

  放在

  表

  之外
• 在HTML页面中不能有重复的ID，并且希望引用除第一个ID以外的任何内容。改用类
• 不要在jQuery中使用内联事件处理程序。如果动态添加了元素，请使用委派的jQuery处理程序
• 使用隐藏在页面中的元素保存模板。如果您将其存储在HTML中，而不是代码中，您会注意到您的
  丢失，并被一个额外的
  替换
• 您可以将JavaScript选择器与jQuery混合使用。只需使用jQuery选择器即可。它们比较短

• a*b*c*d

  方程不需要额外的括号

• 输入

  和

  img

  元素是自动关闭的，没有结束标记
• 您的所有计算都完全相同，因此请重用代码
• 养成对变量和类使用一致大小写（大写/小写/混合）的习惯

使用委托事件处理程序，如下所示：

$(document).on('change', '.cost,.amount,.unit,.parameters', function() {
    var $tr = $(this).closest('tr');
    var sum = -1 * $('.Amount', $tr).val() * $('.cost', $tr).val() * $('.Unit', $tr).val();
    $(".minisum", $tr).html(sum);
}

重新模板化：您可以将模板行存储在类型未知的虚拟

脚本

块中（我使用

文本/模板

），它将被浏览器忽略

e、 g

---

JSFiddle（大部分是功能性的）：

看起来您的问题来自于重复的ID。存在重复ID时，

document.getElementById（）

的行为未定义。每个浏览器都会尝试做一些合理的事情，但无法知道将返回哪个元素（尽管它很简单）

一个选项是将复制的id更改为

类

，然后在创建新行时，使用计数器为该行指定其自己的唯一id：

var newRow=jQuery（“…”）

这将允许您访问要计算的任何行及其子行：

使用
$（'#Cost'）代替
或
document.getElementById（“minisum”）
，使用
$（'#'+[rowid的数量]）。查找（'.Cost'）
或
$（'#'+[行ID数]）.find（'.minisum'）


还有几个其他提示：


要将
的值输入到函数中，只需将其作为如下参数传递：
onchange=“changeCost（value）”
。现在，您可以删除4个相同函数中的3个，并删除剩余函数的第一行
您不需要关闭
标记（请参阅）
第二列上有两个
标记
确保在
和
标记上有正确的标记嵌套
您的代码似乎丢失了一大块？开头的标签在哪里？另外，乍一看，我猜您的问题是由id冗余引起的。元素的ID在页面上必须是唯一的。当您创建新元素时，您正在将所有内容的ID设置为AA。您的所有javascript似乎都使用了
.getElementById（）
，这将导致问题。哇。。。以前从未见过这么多不必要的括号（（$（$（'金额'）.val（））*（（$（$（'成本'）.val（））*（$（$（'单位'）.val（）））））（$（$（'.'单位'））.val（））（）））
您至少可以删除其中的7（对）！事实上，我认为它们都可以在不影响计算的情况下被删除：）CalcUnitValue、changeCost、changeAmount和changeUnit都是相同的，除了在每一行的第一行中设置了一个变量，然后就再也不用了。去掉这四个函数中的三个，不必要的变量和不必要的括号，正如@TrueBlueAussie所指出的；输入值？
function CalcUnitValue() {
    var U = document.getElementById("Unit").value;
    var SUM = -1 * ((((($('#Amount').val())) * (((($('#Cost').val())) * (($('#Unit').val())))))));
    document.getElementById("minisum").innerHTML = SUM;
    document.getElementById("minisum").readOnly = true;
}

function changeCost() {
    var C = document.getElementById("Cost").value;
    var SUM = -1 * ((((($('#Amount').val())) * (((($('#Cost').val())) * (($('#Unit').val())))))));
    document.getElementById("minisum").innerHTML = SUM;
    document.getElementById("minisum").readOnly = true;
}

function changeAmount() {
    var C = document.getElementById("Amount").value;
    var SUM = -1 * ((((($('#Amount').val())) * (((($('#Cost').val())) * (($('#Unit').val())))))));
    document.getElementById("minisum").innerHTML = SUM;
    document.getElementById("minisum").readOnly = true;

}

function changeUnit() {
    var C = document.getElementById("Amount").value;
    var SUM = -1 * ((((($('#Amount').val())) * (((($('#Cost').val())) * (($('#Unit').val())))))));
    document.getElementById("minisum").innerHTML = SUM;
    document.getElementById("minisum").readOnly = true;

}

function minisum() {
    var SUM = -1 * ((((($('#Amount').val())) * (((($('#Cost').val())) * (($('#Unit').val())))))));
    return alert(document.getElementById('minisuminput').innerHTML);

$(document).on('change', '.cost,.amount,.unit,.parameters', function() {
    var $tr = $(this).closest('tr');
    var sum = -1 * $('.Amount', $tr).val() * $('.cost', $tr).val() * $('.Unit', $tr).val();
    $(".minisum", $tr).html(sum);
}

<script id="template" type="text/template">
<tr class="Parameters" id="AA">
  <td>
    <input type="text" class="Parameters" name="TypeOfOut" />
  </td>
  <td>
    <select class="Unit ee105" type="text" value=" " name="Unit">
      <option value="2">KM</option>
      <option value="4">euro</option>
      <option value="3">$</option>
      <option value="25">WorkHour</option>
      <option value="3">dollar</option>
      <option value="25">WorkHour</option>
    </select>
  </td>
  <td>
    <input class="cost" type="number" value="" name="Cost">
  </td>
  <td>
    <input class="amount ee105" type="number" value="" name="Amount">
  </td>
  <td><span class="minisum" name="minisum"></span></td>
  <td class="system">
    <input type="hidden" class="ParameterID" name="ParameterID{counter}" />
  </td>
  <td class="system">
    <input type="hidden" class="ProjectID" name="ProjectID" value="3" />
  </td>
  <td>
    <input type="submit" value="Submit">
  </td>
</tr>
</script>

$('table.Parameter#new').append($('#template').html().replace('{counter}', counter));