0

我正在尝试对表中的一些动态生成的行执行一些计算。dropdowm 选项都带有数值，并根据这些值计算 RiskOfObsctacle 和 ValueOfObstacle：
ValueOfObstacle= Likelihood Severity 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();
});
}

同样基于结果，文本的颜色应该改变，即如果为正则为绿色，如果为负则为红色。谢谢您的帮助。

障碍物台

请让我知道是否需要更多信息！

4

1 回答 1

2

你有几件事在这里发生。

  1. 您的标记应该被清理一下，以向项目添加类以在行中引用它们。拥有 "class='Likelihood'" 将允许您引用元素。

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

  3. 我在您的示例中看不到它，但请确保您在 jQuery 的“就绪”事件中绑定了所有这些。否则，如果这是在页面的头部，则您正在尝试在元素存在之前绑定它们。和...

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


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

说了这么多，我把两个小提琴放在一起让你清理它并展示它的工作原理。第一个只是您放置的内容的副本，并清理了一些东西以使其正常工作。我添加了类，清理了一些语法错误，然后将事件绑定到就绪处理程序中。“onkeyip”仍然存在，但没有被使用。如果您想从其他元素中使用它，我还将“calc”保留为它自己的函数，但内容实际上可以是一个匿名函数作为更改事件的处理程序。

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

基本上，您可以创建对象和数组并将它们及其属性绑定到页面或模板中的元素以进行动态呈现。如果您听说过模型视图视图模型 (MVVM)，那么它有助于使其发挥作用。使用双向绑定，在输入或类似方面对 UI 的任何更改都会更改对象或数组（模型）。通过脚本对模型所做的任何更改都会显示在模板（视图）中。它可能会变得非常复杂，但是您的情况适合开始使用。它可以很好地添加、删除和修改对象或对象数组。例如，在我提供的示例中，添加和删除只是使用新的空对象更新模型，但 UI 会使用新的表格行进行更新。该行的模板存储在 HTML 中的脚本标记中，因此非常易于使用。

无论如何，毕竟和我的 0.02 美分，下面是链接。提出问题并选择对您来说最简单的方法。但是，如果您对大块 HTML 的动态呈现做了很多工作，请考虑使用模板。

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

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

更新：如果您使用模板方法，障碍物的数据已经根据创建的行构造成单个对象数组。这就是模板方法的伟大之处：您添加一行，它会将一个项目添加到数组中。然后，当您想使用它时，只需使用数组，在这种情况下为障碍物。例如，这使得发布到服务以更新数据库中的项目变得非常容易。使用 AJAX，您可以将对象作为“数据”传递，该对象将被序列化为字符串。在服务器将其反序列化为一个对象，您可以做任何您想做的事情。

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

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

于 2013-11-12T04:38:54.867 回答