在動態生成的輸入

Question

我的代碼檢測輸入動態地生成的一系列的輸入字段的。每行字段都屬於一個數據庫記錄，我使用php的動態數組符號（'[]'）來捕獲值。 然後在輸入字段中，我想顯示價格輸入值已乘以數據從數據庫中生成的項目總數。

我使用的JavaScript置於其內的foreach循環以檢測輸入和繁殖，但它僅適用於在第一字段中，在所述第二場在第一場示出太乘積值。

這是代碼結構：

<?php foreach ($barang->result_array() as $row): ?> 
<tr> 
    <td><?php echo $row['nmbr']; ?> </td> 
    <td><?php echo $row['jumlah']?> </td> 
    <td><input id="pnwrn" type="text" name="pnwrn[]" value="" /> 

    <input type="hidden" name="id_barang[]" value="<?php echo $row['id_barang']?>" /> 
    <input type="hidden" name="jumlah[]" value="<?php echo $row['jumlah']?>" /> </td> 
    <td><div id="output"><script type="text/javascript"> 
     var harga = <?php echo $row['jumlah']; ?>; 
     $('input').bind('input propertychange', function() { 
      $('#output').html($(this).val()*harga); 
     }); 
    </script> 
    </div></td> 
</tr> 
<?php endforeach; ?> 

我試圖使輸出顯示每一行中的多重價值，但沒有結果yet..can有人告訴我，我做我的錯誤？ 感謝〜

Answer 1

有其他人在評論中所指出的幾個問題。

頁面上的每個值都發生變化的原因是因爲您使用的是輸出div而不是類，而您的jQuery更改處理程序會說：「將所有內容都輸出爲id並將此新html在裏面。」除此之外，在頁面上多次使用id是無效的。所以，將輸出和pnwrn都改爲類。

爲簡單起見，以獲得相應的「價格」值後，你可以將其存儲爲輸入數據。

<?php foreach ($barang->result_array() as $row): ?> 
<tr> 
    <td><?php echo $row['nmbr']; ?> </td> 
    <td><?php echo $row['jumlah']?> </td> 
    <td><input class="pnwrn" type="text" name="pnwrn[]" value="" data-harga="<?php echo $row['jumlah']?>" /> 
    <input type="hidden" name="id_barang[]" value="<?php echo $row['id_barang']?>" /> 
    <input type="hidden" name="jumlah[]" value="<?php echo $row['jumlah']?>" /> </td> 
    <td><div class="output"></div></td> 
</tr> 
<?php endforeach; ?> 

第二個問題是您正在每個單獨的表格行中編寫單獨的處理程序。這不僅效率低下，而且很難讀取輸出並且完全沒有必要。您只需要在頁面上放一次腳本，以便不會將其包含在您的循環中。要獲得相應的計算值，您只需檢索輸入中存儲的數據值即可。然後，您可以使用DOM遍歷來查找相應的輸出div。在這種情況下，請走到最近的祖先行，然後用輸出類找到它的後代元素。另外，除非您使用的是舊版本的jQuery，否則請使用on方法，而不要使用已棄用的綁定。

<script type="text/javascript"> 
$('input').on('change', function() { 
    var harga = parseInt($(this).data('harga')); 
    $('this').parents('tr').find('.output').html($(this).val()*harga); 
}); 
</script>