对动态生成的行执行计算（jQuery）

Question

我正在尝试对表格中的一些动态生成的行执行一些计算。下拉选项都带有数值，并根据值计算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 ='Likelihood'”将允许您引用元素。

2. 您的calc函数应该是更改事件绑定的处理程序。此外，在calc事件中，您有一些jQuery语法错误，例如“find（'Severity'）”和“.value（）”调用。

3. 我在您的示例中看不到它，但请确保您在jQuery的“ready”事件中绑定所有这些内容。否则，如果它位于页面的头部，则您尝试在元素存在之前绑定它们。而且......

4. 您应该使用jQuery“.on”将更改事件处理程序绑定到表，以便它适用于动态添加的元素，如下所示：

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

所有这一切，我把两个小提琴放在一起清理它并显示它正常工作。第一个只是一个副本，你把一些东西清理干净，使其工作。我添加了类，清除了一些语法错误，然后将事件绑定在ready处理程序中。 “onkeyip”仍在那里，但没有被使用。如果你想从其他元素中使用它，我也将“calc”保留为它自己的函数，但是内容实际上可以是一个anon函数作为change事件的处理程序。

第二小提琴有点不同。正如我所看到的，你正在做的事情非常适合模板化和数据绑定。我使用JSViews包，JSRender和JSObservable，并将标记作为模板包含在页面中。它需要一点点习惯，但它对UI工作很好，并且使管理标记就像你渲染更容易，因为它实际上是带有数据绑定的HTML（JSViews的数据链接）。您可以在此处阅读：http://www.jsviews.com/#home

基本上，您可以创建对象和数组，并将它们及其属性绑定到页面或模板中的元素以进行动态渲染。如果您已经听说过模型视图模型（MVVM），那么它有助于使其工作。使用双向绑定，对输入或类似的UI进行任何更改都会更改对象或数组（模型）。通过脚本对模型的任何更改都会显示在模板（视图）中。它可能变得相当复杂，但你的情况适合于一个相当不错的开始。它使添加，删除和修改对象或对象数组变得很好。在我提供的示例中，添加和删除仅使用新的空对象更新模型，但UI更新了新的表行。并且该行的模板存储在HTML中的脚本标记中，因此使用起来非常简单。

无论如何，毕竟这和我的.02美分，以下是链接。提出问题并选择最简单的方法。但是，如果您对大块HTML的动态呈现做了很多工作，请查看模板。

小提琴原作：http://jsfiddle.net/Hps25/

小提琴模板：http://jsfiddle.net/sW33n/2/

更新：如果使用模板化方法，障碍物的数据已根据创建的行构建到单个对象数组中。这是关于模板方法的好处：你添加一行，它会向数组添加一个项目。然后，当您想要使用它时，您只需使用数组，在本例中为障碍。例如，这使得发布到服务以更新数据库中的项目变得非常容易。使用AJAX，您可以将对象作为“data”传递，该对象将被序列化为字符串。在服务器上将其反序列化为对象，您可以按照自己的意愿执行操作。

我更新了小提琴以显示一个这样的例子，将障碍数组与“组合”选择元素中的单个值一起传递。显然，仍然需要定义服务器端部分。

更新小提琴：http://jsfiddle.net/sW33n/4/