Функция цикла javascript для каждой строки после добавления новой строки

Question

У меня есть строка в таблице, которая может быть дублирована javascript. В первой строке у меня есть код javascript, который вычисляет.

После дублирования новой строки известково 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-странице и ожидать ссылки на что-либо, кроме первого. Вместо этого используйте классы.
• Не используйте встроенные обработчики событий с 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); 
} 

Re шаблонным: вы можете хранить свой шаблон строку в фиктивном script блоке с неизвестным типом (я использую 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/

Answer 2

Похоже, ваша проблема исходит от наличия повторяющихся идентификаторов. Когда есть повторяющиеся идентификаторы, поведение document.getElementById() не определено. Каждый браузер попытается сделать что-то разумное, но нет способа узнать, какой элемент будет возвращен (хотя это usually the first element).

Одним из вариантов являются изменение дублированных идентификаторов в class, а затем при создании новой строки, дать ту строке, это собственный уникальный идентификатор с помощью счетчика:

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)". Теперь вы можете удалить 3 из ваших 4 идентичных функций, а также удалить первую строку оставшейся.
• Вам не нужно закрывать </input> меток (см here)
• Есть два </td> метки на вашу вторую колонке
• Убедитесь, что вы имеете правильный тег гнездящийся на ваши </tr> и </form> тегов