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

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 并期望引用第一个 ID 以外的任何内容。改用类。
• 不要在 jQuery 中使用内联事件处理程序。如果您动态添加了元素，请使用委托(delegate)的 jQuery 处理程序。
• 使用隐藏在页面中的元素来保存您的模板。如果您将它存储在 HTML 中而不是代码中，您会注意到您的 </select>丢失并被额外的 </td> 取代.
• 您将 JavaScript 选择器与 jQuery 混合使用。坚持使用 jQuery 选择器。它们更短。
• a * b * c * d 不需要额外的括号方程式。
• inputs和 img元素应该是自闭合的，没有结束标记。
• 您的所有计算都完全相同，因此请重用代码。
• 养成对变量和类使用一致大小写(大写/小写/混合)的习惯。

像这样使用委托(delegate)的事件处理程序:

$(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 中 block ，未知类型(我使用 text/template )，浏览器将忽略它。

例如

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

例如

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

可玩的 JSFiddle(大部分功能): https://jsfiddle.net/TrueBlueAussie/33e9ptgu/