Ich habe eine dynamische HTML-Tabelle (Zeilen können hinzugefügt werden) und ich möchte „nur“ den Wert in Litern lesen und ihn in USG umwandeln, wenn der Benutzer den Wert eingibt (um den Wert in Litern zu erhalten, geben Sie „Convert it“ und „put“) ein Geben Sie es in das USG-Eingabefeld ein.
Dynamische HTML-Tabellen
Ich habe eine Funktion erstellt, die nach jedem Einfügen eines Aufwärtswerts ausgeführt wird:
_onFuelLiterInput(event) { // For all inputFields with name = fuelLiter $('#tankdaten .' + DEFINES.class.DYNAMIC_TABLE).find('tbody tr input.fuelLiter').each((index, element) => { let $element = $(element); let $ind = $(index); let value = 0; let USG = 0; // Read Value in Liters try { value = parseFloat($element.val()); } catch (e) { value = 0; } // ignore empty values if (isNaN(value)) { value=0; } // Convert Liter to USG USG = Math.round(value * 0.26417205235815 * 100)/100; // Update field with USG value $(event.target).closest('tr').find('.fuelUSG').val(USG); });
Jede Zeile in HTML enthält ein , wie im folgenden Beispiel gezeigt:
<td class="td-inputData"> <input class="inputFieldLiter fuelLiter" type="text" name="Fuel[<?php echo $i; ?>][fuelLiter]" data-name="fuelLiter" value="<?php echo $row['fuelLiter']; ?>" /> </td> <td class="td-inputData"> <input class="inputFieldLiter fuelUSG" type="text" name="Fuel[<?php echo $i; ?>][fuelUSG]" data-name="fuelUSG" value="<?php echo $row['fuelUSG']; ?>" /> </td>
Da der Feldname in jeder Zeile derselbe ist, habe ich Probleme, auf das Feld in derselben Zeile zu verweisen, und $(event.target).closest('tr').find('.fuelUSG').val(USG) ; Habe es nicht behoben, da es die gleiche Holzigkeit verloren hat.
Wissen Sie, wie es geht?
Ich habe $(event.target).closest('tr').find('.fuelUSG').val(USG); ausprobiert und erwartet, dass der Name „fuelUSG“ aktualisiert wird. Aber leider klappt es nicht.
我必须承认,我不记得我是否触及了使其工作的关键的东西......(当然我正确地添加了您缺少的事件处理程序)
无论如何,在这个演示中,除了第一个仅使用模板添加行的函数之外,它还分两步考虑了转换逻辑,以便:
整个游戏是在所有
input.UsedFuel
上的单个循环上设置的,对于每一行中的每个输入,仅使用开始时已设置的值执行转换,并添加将执行转换的keyup
事件侦听器实时显示用户正在编辑的行。