JQuery - Calculs/conversions à la volée dans des tables dynamiques

Question

J'ai un tableau HTML dynamique (des lignes peuvent être ajoutées) et je veux "juste" lire la valeur en litres et la convertir en USG lorsque l'utilisateur saisit la valeur (pour obtenir la valeur en litres, mettez Convertissez-la et mettez dans le champ de saisie USG).

Tableaux HTML dynamiques

J'ai créé une fonction qui s'exécute après chaque insertion d'une valeur positive :

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

            });

Chaque ligne HTML contient un , comme le montre l'exemple suivant :

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

Étant donné que le nom du champ est le même dans chaque ligne, j'ai du mal à référencer le champ dans la même ligne, et $(event.target).closest('tr').find('.fuelUSG').val(USG) ; Je ne l'ai pas réparé car il a perdu le même caractère boisé.

Vous savez comment faire ?

J'ai essayé $(event.target).closest('tr').find('.fuelUSG').val(USG); et je m'attendais à ce que le nom "fuelUSG" soit mis à jour. Mais malheureusement, ça ne marche pas.

Answer 1

Je dois admettre que je ne me souviens pas si j'ai touché à l'élément clé qui faisait que cela fonctionnait... (bien sûr, j'ai ajouté correctement le gestionnaire d'événements qui vous manquait)

Quoi qu'il en soit, dans cette démo, outre la première fonction qui ajoute simplement des lignes à l'aide de modèles, elle prend également en compte la logique de transformation en deux étapes pour que :

• La couche la plus basse est uniquement responsable de l'obtention des valeurs de chaîne paramètres et renvoie le résultat de la conversion sous forme de nombre
• Utilisez des éléments d'entrée spécifiques comme couches supérieures de paramètres lui-même ; récupère toujours sa valeur sous forme de chaîne ; fonction décrite précédemment et définit ses entrées frères avec des valeurs Converti

L'ensemble du jeu est réalisé avec tous les input.UsedFuel 上的单个循环上设置的，对于每一行中的每个输入，仅使用开始时已设置的值执行转换，并添加将执行转换的 keyup auditeurs d'événements affichant en temps réel la ligne que l'utilisateur est en train de modifier.

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