JQuery – Direkte Berechnungen/Konvertierungen in dynamischen Tabellen

Question

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.

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;
}