修改舊的JavaScript代碼來新

Question

舊的HTML和JavaScript代碼：

<tr> 
<input id="pret_id_1" type="text" name="pret" /> 
<input id="val_id_1" type="text" name="val"/> 
<input id="val_tva_id_1" type="text" name="val_tva"/> 
<input id="cant_id_1" type="text" name="cant" /> 
</tr> 

<script> 
    var x=document.form_factura; 
    x.val.value = (x.pret.value * x.cant.value).toFixed(2) ; 
    x.val_tva.value = ((x.pret.value * x.cant.value) * tva_val).toFixed(2);  

    if(!/^[a-z()+ A-Z()-]*$/.test(x.val_tva.value)){   
    var suma = (x.pret.value * x.cant.value)- (-x.val_tva.value); 
    } else { 
    var suma = (x.pret.value * x.cant.value); 
    }  
    x.suma.value = suma.toFixed(2); 
    ... 
</script> 

我儘量乘這個..我的名字元素的加入陣列。

<tr class="row1"> 
<input id="pret_id_1" type="text" name="pret[]" /> 
<input id="val_id_1" type="text" name="val[]"/> 
<input id="val_tva_id_1" type="text" name="val_tva[]"/> 
<input id="cant_id_1" type="text" name="cant[]" /> 
</tr> 
<tr class="row2"> 
<input id="pret_id_2" type="text" name="pret[]" /> 
<input id="val_id_2" type="text" name="val[]"/> 
<input id="val_tva_id_2" type="text" name="val_tva[]"/> 
<input id="cant_id_1" type="text" name="cant[]" /> 
</tr> 

如何更新數組輸入名稱元素的javascript代碼？

如果它只有一行（.row1），javascript無法正常工作..必須至少有2個具有相同名稱的元素。

編輯：我忘了提及我使用php和mysql來存儲數據。

謝謝。

Answer 1

那麼你有獨特的ID，所以你可以循環

for(var i=1;i<=2;i++) { 
    var pret = document.getElementById("pret_id_" + i); 
    var cant = document.getElementById("cant_id_" + i); 
    var val = document.getElementById("val_id_" + i); 
    val.value = (pret.value * cant.value).toFixed(2) ; 
} 

如果你wan t去做它的名字，

var pretElems = document.form_factura["pret[]"]; 
var cantElems = document.form_factura["cant[]"]; 
var valElems = document.form_factura["val[]"]]; 


for(var i=1;i<=2;i++) { 
    var pret = pretElems[i]; 
    var cant = cantElems[i]; 
    var val = valElems[i]; 
    val.value = (pret.value * cant.value).toFixed(2) ; 
} 

Answer 2

首先你不應該在字段的名稱添加[]：

<tr class="row1"> 
<input id="pret_id_1" type="text" name="pret" /> 
<input id="val_id_1" type="text" name="val"/> 
<input id="val_tva_id_1" type="text" name="val_tva"/> 
<input id="cant_id_1" type="text" name="cant" /> 
</tr> 
<tr class="row2"> 
<input id="pret_id_2" type="text" name="pret" /> 
<input id="val_id_2" type="text" name="val"/> 
<input id="val_tva_id_2" type="text" name="val_tva"/> 
<input id="cant_id_1" type="text" name="cant" /> 
</tr> 

然後x.val將返回DOM元素的數組（而不是一個單一的元素像前）：

<script> 
    var x=document.form_factura; 
    for(var i=0; i<x.pret.length; i++) { 
    x.val[i].value = (x.pret[i].value * x.cant[i].value).toFixed(2) ; 
    x.val_tva[i].value = ((x.pret[i].value * x.cant[i].value) * tva_val).toFixed(2);  

    if(!/^[a-z()+ A-Z()-]*$/.test(x.val_tva.value)){   
     var suma = (x.pret[i].value * x.cant[i].value)- (-x.val_tva[i].value); 
    } else { 
     var suma = (x.pret[i].value * x.cant[i].value); 
    }  
    x.suma[i].value = suma.toFixed(2); 
    ... 
    } 
</script>