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