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.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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:
Seluruh permainan selesai dengan semua
input.UsedFuel上的单个循环上设置的，对于每一行中的每个输入，仅使用开始时已设置的值执行转换，并添加将执行转换的keyuppendengar 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 { //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; }