Question

我在表格中有一行可以通过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>

创建新行的代码：

        <script>
    var counter = 1;
    jQuery('img.add-author').click(function(event){
        event.preventDefault();
        counter++;
        var newRow = jQuery(' <tr class="Parameters" id="AA"><td><input type="text" id="Parameters" name="TypeOfOut"/></td><td><select id="Unit" type="text" value=" " class="ee105" name="Unit" onchange="changeUnit(this.value)"><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><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' + counter +'"></input></td><td id="system"><input type="hidden" id="ProjectID" name="ProjectID" value="3"></input></td><td><input type="submit" value="Submit"></td></tr>');

        jQuery('table.Parameter#new').append(newRow);
    });


    </script>

javascript代码计算：

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);

谢谢你：）

Answer 1

您的HTML无效。中间有一个额外的结束</td>。您还需要将form放在table。
您不能在HTML页面中拥有重复的ID，并且除了第一个之外，您希望引用任何内容。改为使用类。
不要对jQuery使用内联事件处理程序。如果您有动态添加的元素，请使用委托的jQuery处理程序。
使用页面中隐藏的元素来保存模板。如果您将其存储在HTML中，而不是代码中，那么您会注意到</select>已丢失，并被额外的</td>取代。
您将JavaScript选择器与jQuery混合使用。坚持使用jQuery选择器。它们更短。
a * b * c * d方程式不需要额外的括号。
inputs和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);
}

重新模板：您可以将模板行存储在具有未知类型的虚拟script块中（我使用text/template），浏览器将忽略它。

e.g。

<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>

您会注意到要插入新值的{counter}占位符。使用它作为HTML源来创建新行。

e.g。

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

JSFiddle玩（大部分功能）： https://jsfiddle.net/TrueBlueAussie/33e9ptgu/

Answer 2

看起来您的问题来自于重复的ID。当存在重复的ID时，document.getElementById()的行为未定义。每个浏览器都会尝试做一些合理的事情，但是无法知道将返回哪个元素（尽管它是usually the first element）。

一个选项是将重复的ID更改为class，然后在创建新行时，使用您的计数器为该行指定它自己的唯一ID：

var newRow = jQuery(' <tr class="Parameters" id="' + counter + '"><td>.....</td></tr> ');

这样您就可以访问计算所需的行，以及它的子using jquery：

取代$('#Cost')或document.getElementById("minisum")，而不是$('#' + [number of rowid]).find('.Cost');或$('#' + [number of rowid]).find('.minisum');

其他一些提示：

要将<input>的值添加到函数中，只需将其作为参数传递给：onchange="changeCost(value)"。现在，您可以删除4个相同功能中的3个，并删除剩下的1个中的第一行。
您不需要关闭</input>代码（请参阅here）
第二列

</td>

确保您的</tr>和</form>代码

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

2 个答案: