JQuery - Pengiraan/penukaran segera dalam jadual dinamik

Question

Saya mempunyai jadual HTML dinamik (baris boleh ditambah) dan saya "hanya" ingin membaca nilai dalam liter dan menukarnya kepada USG apabila pengguna memasukkan nilai (untuk mendapatkan nilai dalam liter, letakkan Tukar dan letakkan dalam medan input USG).

Jadual HTML dinamik

Saya telah mencipta fungsi yang dilaksanakan selepas setiap sisipan nilai atas:

_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);

            });

Setiap baris dalam HTML mengandungi , seperti yang ditunjukkan dalam contoh berikut:

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

Memandangkan nama medan adalah sama dalam setiap baris, saya menghadapi masalah untuk merujuk medan dalam baris yang sama dan $(event.target).closest('tr').find('.fuelUSG').val(USG) ; Tidak membetulkannya kerana ia kehilangan kayu yang sama.

Tahu cara melakukannya?

Saya telah mencuba $(event.target).closest('tr').find('.fuelUSG').val(USG); dan menjangkakan bahawa nama "fuelUSG" akan dikemas kini. Tetapi malangnya ia tidak berfungsi.

Answer 1

Saya mesti mengakui, saya tidak ingat jika saya menyentuh perkara utama untuk menjadikannya berfungsi... (tentu saya menambah pengendali acara yang anda hilang dengan betul)

Apa pun, dalam demo ini, selain fungsi pertama yang hanya menambah baris menggunakan templat, ia juga mempertimbangkan logik transformasi dalam dua langkah supaya:

• Lapisan paling bawah hanya bertanggungjawab untuk mendapatkan nilai rentetan parameter dan kembalikan hasil penukaran sebagai nombor
• Gunakan elemen input khusus sebagai lapisan atas parameter sendiri; masih mendapat nilainya sebagai rentetan; fungsi yang diterangkan sebelum ini dan menetapkan input saudaranya dengan nilai Ditukar

Seluruh permainan selesai dengan semua input.UsedFuel 上的单个循环上设置的，对于每一行中的每个输入，仅使用开始时已设置的值执行转换，并添加将执行转换的 keyup ​​pendengar acara menunjukkan dalam masa nyata baris yang sedang diedit oleh pengguna.

//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