我确实有一个动态 HTML 表格(可以添加行),我“只是”想读取以升为单位的值,并将其在用户输入值时将其转换为 USG(以升为单位获取值,将其转换并放入它位于 USG 输入字段中)。
动态 HTML 表格
我已经创建了一个函数,该函数在每次插入升值后执行:
_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); });
HTML 中的每一行都包含一个 ,如下例所示:
<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>
由于每一行的字段名称都相同,我很难在同一行中引用该字段,并且 $(event.target).closest('tr').find('.fuelUSG').val(美国政府);没有解决它,因为它失去了相同的木质。
知道如何做吗?
我已经尝试过 $(event.target).closest('tr').find('.fuelUSG').val(USG);并希望名称为“fuelUSG”的名称将被更新。但不幸的是它不起作用。
我必须承认,我不记得我是否触及了使其工作的关键的东西......(当然我正确地添加了您缺少的事件处理程序)
无论如何,在这个演示中,除了第一个仅使用模板添加行的函数之外,它还分两步考虑了转换逻辑,以便:
整个游戏是在所有
input.UsedFuel
上的单个循环上设置的,对于每一行中的每个输入,仅使用开始时已设置的值执行转换,并添加将执行转换的keyup
事件侦听器实时显示用户正在编辑的行。