Выполнение расчетов по динамически генерируемых строк (JQuery)

Question

Я пытаюсь выполнить некоторые вычисления на некоторых динамически генерируемых строк в моих table.The вариантов dropdowm все несут числовые значения и на основе значений будет рассчитали RiskOfObsctacle и ValueOfObstacle:
ValueOfObstacle = Вероятность Степень серьезности Principal;
RiskOfObsctacle = Вероятность * Степень серьезности;

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

Вот мой JQuery код для создания строки:

function addRow(tableID) { 

var table = document.getElementById(tableID); 

var rowCount = table.rows.length; 
var row = table.insertRow(rowCount); 

var cell1 = row.insertCell(0); 
var element1 = document.createElement("input"); 
element1.type = "checkbox"; 
element1.name="chkbox[]"; 
cell1.appendChild(element1); 

var cell2 = row.insertCell(1); 
cell2.innerHTML="<textarea name='Obstacle[]' cols='20'>"; 

var cell3 = row.insertCell(2); 
cell3.innerHTML = "<select name='Likelihood[]'> onKeyup='calc() <option value='1'>Low</option> <option value='2'>Medium</option><option value='3'>High</option>/>"; 

var cell4 = row.insertCell(3); 
cell4.innerHTML = "<select name='Severity[]'> onKeyup='calc() <option value='1'>Low</option> <option value='2'>Medium</option><option value='3'>High</option>/>"; 

var cell5 = row.insertCell(4); 
cell5.innerHTML = "<select name='Priority[]'> onKeyup='calc() <option value='1'>Low</option> <option value='2'>Medium</option><option value='3'>High</option>/>"; 

var cell6 = row.insertCell(5); 
cell6.innerHTML = "<input type = 'text' name='Principal[]' required placeholder='100.3' onKeyup='calc()'>"; 

var cell7 = row.insertCell(6); 
cell7.innerHTML = "<input type = 'text' name='ObsRisk[]' readonly value onKeyup='calc()'>"; 


var cell8 = row.insertCell(7); 
cell8.innerHTML = "<input type = 'text' name='ObsValue[]' readonly onKeyup='calc()'>"; 

} 

А вот код для выполнения расчетов:

function calc(){ 
$('.Likelihood, .Severity, .Principal').change(function(){ 
var value = 0; 
var $row = $(this).closest("tr"); 
var like = parseFloat($row.find('Likelihood').val()); 
var sev = parseFloat($row.find('Severity').val()); 
var prin = parseFloat($row.find('Principal').val()); 
value = like*sev*prin; 
if (isNaN(value)) { 
$row.find('.ObsValue').value("Nix is"); 
} 
else{ 
$row.find('.ObsValue').val(value); 
} 
calc(); 
}); 
} 

Также на основе результатов цвет текста должен изменить т.е. зеленый, если положительный и красный, если отрицательный. Спасибо за помощь.

Пожалуйста, дайте мне знать, если больше информации необходимо!

Answer 1

У вас есть пара вещей, происходящих здесь.

1. Ваша разметка должна быть очищена немного, чтобы добавить классы к элементам, чтобы ссылаться на них в строках. Наличие «class =« Вероятность »» позволит вам ссылаться на элементы.

2. Ваша функция calc должна быть обработчиком привязки события изменения. Кроме того, в событии calc у вас есть пара синтаксических ошибок jQuery, таких как вызовы «find (« Severity ») и« .value() ».

3. Я не вижу его здесь в вашем примере, но убедитесь, что вы привязываете все это к событию «ready» для jQuery. В противном случае, если это находится в начале страницы, вы пытаетесь привязать элементы до их существования. И ...

4. Вы должны использовать JQuery «.На», чтобы связать обработчик события изменения в таблицу, так что он работает для динамически добавленных элементов, таких как следующие:

$(function() { // jQuery ready shorthand 
    $('#myTable').on('change','.Likelihood,.Severity,.Principal', function(e) { 
     /* something */ 
    } 
});

Все, что сказал , Я собрал две скрипки для вас, чтобы очистить ее и показать, что она работает. Первый - это всего лишь копия того, что вы положили, с некоторыми элементами, очищенными, чтобы заставить его работать. Я добавил классы, очистил некоторые из синтаксических ошибок, а затем связал события в готовом обработчике. «Onkeyip» все еще существует, но не используется. Я также оставил «calc» как свою собственную функцию, если вы хотите использовать ее из других элементов, но содержимое действительно может быть анонимной функцией в качестве обработчика события изменения.

Вторая скрипка немного отличается. То, что вы делаете, просто из того, что я вижу, отлично подходит для шаблонов и привязки данных. Я использовал пакет JSViews с JSRender и JSObservable и включил вашу разметку в качестве шаблона на странице. Это немного привыкает, но хорошо для работы с пользовательским интерфейсом и делает управление разметкой, как и вы, намного проще, поскольку на самом деле это HTML с привязкой данных (привязка данных для JSView).Вы можете прочитать здесь: http://www.jsviews.com/#home

В принципе, вы можете создавать объекты и массивы и связывать их и их свойства с элементами на странице или шаблоне для динамического рендеринга. Если вы слышали о Model View View Model (MVVM), это помогает сделать работу. При двусторонней привязке любые изменения в пользовательском интерфейсе в терминах входов или аналогичных изменений изменяют объект или массив (модель). Любые изменения в модели через скрипт отображаются в шаблоне (представлении). Он может стать довольно сложным, но ваша ситуация приносит неплохие результаты для начала. Это позволяет добавлять, удалять и изменять объекты или массив объектов. В приведенном выше примере добавление и удаление, например, просто обновляют модель с помощью нового пустого объекта, но пользовательский интерфейс обновляется с новой строкой таблицы. Шаблон для строки хранится в теге скрипта в HTML, поэтому с ним очень легко работать.

В любом случае, после всего этого и моих 0,0 центов ниже ссылки. Задавайте вопросы и выбирайте то, что вам легче. Однако, если вы много работаете с динамическим рендерингом больших блоков HTML, изучите шаблоны.

Fiddle для оригинала: http://jsfiddle.net/Hps25/

Fiddle для шаблонов: http://jsfiddle.net/sW33n/2/

Update: Если вы используете метод шаблонного, данные для препятствия уже построен в единый массив объектов, основанный на созданных строк. Это отличная идея в плане шаблонов: вы добавляете строку, добавляете элемент в массив. Затем, когда вы хотите использовать его, вы просто используете массив, в данном случае препятствия. Таким образом, это делает его очень простым в использовании для публикации в службе для обновления элементов в БД, например. Используя AJAX, вы можете передать объект как «данные», которые будут сериализованы в строку. Уничтожьте его на сервере в объект, и вы можете делать все, что пожелаете.

Я обновил скрипку, чтобы показать пример этого, передав массив препятствий вместе с одним значением из элемента «созданного» элемента. Очевидно, что необходимо будет определить часть сервера.

Обновлено Fiddle: http://jsfiddle.net/sW33n/4/