對動態生成的行執行計算（jQuery）

Question

我正在嘗試對我的表中的一些動態生成的行執行一些計算.Dropdowm選項都帶有數值，並根據值計算RiskOfObsctacle和ValueOfObstacle：
ValueOfObstacle =似然嚴重性主體;
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，您可以將對象作為“數據”傳遞，將其序列化為字符串。 在服務器上將其反序列化為對象，您可以按照自己的意願執行操作。

我更新了小提琴以顯示一個這樣的例子，將障礙數組與來自“組合”選擇元素的單個值一起傳遞。 顯然，仍然需要定義服務器端部分。

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