JQuery - 动态表中的即时计算/转换

Question

我确实有一个动态 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”的名称将被更新。但不幸的是它不起作用。

Answer 1

我必须承认，我不记得我是否触及了使其工作的关键的东西......（当然我正确地添加了您缺少的事件处理程序）

无论如何，在这个演示中，除了第一个仅使用模板添加行的函数之外，它还分两步考虑了转换逻辑，以便：

• 最低层只负责获取字符串值 参数并将转换结果返回为数字
• 将特定输入元素作为参数的上层 本身;仍然以字符串形式获取其值；将其传递给转换 前面描述的函数并用值设置其同级输入 已转换

整个游戏是在所有 input.UsedFuel 上的单个循环上设置的，对于每一行中的每个输入，仅使用开始时已设置的值执行转换，并添加将执行转换的 keyup 事件侦听器实时显示用户正在编辑的行。

//adds a number of rows to the main table (for the sake of the demo)
function addRows(n, random = true){  
  const max = 1000;
  for(let i=1;i<=n;i++){
    const row = $('#tableRow')[0].content.cloneNode(true);
    if(random){
      const rndFuel = Math.floor(Math.random() * max);
      $(row).find('.UsedFuel').val(rndFuel);
    }
    $('.table tbody').append(row);
  }  
}
//adds 10 rows
addRows(5, false); //5 with the default value = 100
addRows(5, true); //5 with random values max 1000

//-------------------------

//initialize the page.. given the table in #tankdaten .table
$('#tankdaten .table')
  //finds all the input.UsedFuel in tbody rows
  .find('tbody tr input.UsedFuel')
    //and for each one of them
    .each((index, element) => {
      //performs the conversion for the initial value (set with the value attribute)
      performConversion(element);
      //adds the keyup event handler to the element, that..
      $(element).on('keyup',(event)=>{        
        //will perform the conversion to the element triggering the event
        performConversion( $(event.target) );
      });
    });

//starting from the litersInputElement passed,
//it performs the conversion and sets the value of the sibling .fuelUSG
function performConversion(litersInputElement){
  const USG = convertLitersToUSG($(litersInputElement).val());
  $(litersInputElement).closest('tr').find('.fuelUSG').val(USG);
}

//given the amount of liters (as string) returns the USG as number
function convertLitersToUSG(liters) {
  let parsed = parseFloat(liters);
  if (isNaN(parsed))
    parsed = 0;

  return Math.round(parsed * 0.26417205235815 * 100)/100;
}

sssccc