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.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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 :
L'ensemble du jeu est réalisé avec tous les
input.UsedFuel上的单个循环上设置的，对于每一行中的每个输入，仅使用开始时已设置的值执行转换，并添加将执行转换的keyupauditeurs 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 { //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; }