我的 JavaScript 代码中有一个奇怪的错误。我的标记是这样的
<table id="invoice-details">
<tbody id="tableToModify">
<?php
$i=1;
while($i<2){
?>
<tr>
<td>
<input type="hidden" name="prdid[]" id="prd_id<?php echo $i; ?>" />
<input type="text" tabindex="<?php echo 2+($i*5);?>" name="prdname[]" id="prd_name<?php echo $i; ?>" />
</td>
<td>
<input type="text" name="prddesc[]" id="prd_desc<?php echo $i; ?>" disabled="disabled" />
</td>
<td>
<input type="text" name="prdcost[]" id="prd_cost<?php echo $i; ?>" value="0" disabled="disabled" style="color:#333;" />
</td>
<td>
<input type="text" name="prdquentity[]" id="prd_quentity<?php echo $i; ?>" tabindex="<?php echo 3+($i*5);?>" onKeyUp="calprice1(this.value,'<?php echo $i; ?>');" value="1" />
</td>
<td>
<input type="text" name="prddamount[]" tabindex="<?php echo 5+($i*5);?>" readonly="true" id="prd_damount<?php echo $i; ?>" onKeyUp="calprice2(this.value,'<?php echo $i; ?>');" />
</td>
<td id="readonly">
<input readonly="readonly" name="prdprice[]" id="prd_price<?php echo $i; ?>" value="0" />
</td>
</tr>
<?php
$i++;
}
?>
</tbody>
</table><!--#invoice-details-->
现在,我有一个名为添加新行的按钮。标记是这样的
<input type="button" style="float:left;" onClick="createRow();" class="add-line" value="Add a new line">
为此,我制作了这样的 java 脚本
function createRow()
{
//var newlineno=document.forms[0].elements["prdprice[]"].length;
var newlineno = document.querySelectorAll("[name='prdprice[]']").length
newlineno++;
//console.log(newlineno);
var row = document.createElement('tr');
var col1 = document.createElement('td');
var col2 = document.createElement('td');
var col3 = document.createElement('td');
var col4 = document.createElement('td');
var col5 = document.createElement('td');
var col6 = document.createElement('td');
var col7 = document.createElement('td');
row.appendChild(col1);
row.appendChild(col2);
row.appendChild(col3);
row.appendChild(col4);
row.appendChild(col5);
row.appendChild(col6);
row.appendChild(col7);
col1.innerHTML = "<input type=\"hidden\" name=\"prdid[]\" id=\"prd_id"+newlineno+"\" /><input type=\"text\" name=\"prdname[]\" id=\"prd_name"+newlineno+"\" autocomplete=\"off\" onKeyUp=\"producthint(this.value,'"+newlineno+"');\" /><div id=\"prd"+newlineno+"\" style=\"position:absolute;\"></div>";
col2.innerHTML = "<input type=\"text\" disabled=\"disabled\" name=\"prddesc[]\" id=\"prd_desc"+newlineno+"\" />";
col3.innerHTML = "<input type=\"text\" disabled=\"disabled\" name=\"prdcost[]\" id=\"prd_cost"+newlineno+"\" value=\"0\" />";
col4.innerHTML = "<input type=\"text\" name=\"prdquentity[]\" id=\"prd_quentity"+newlineno+"\" onKeyUp=\"calprice1(this.value,'"+newlineno+"');\" value=\"1\" />";
col5.innerHTML = "<select name=\"prddtype[]\" class=\"discount-type\" id=\"prd_dtype"+newlineno+"\" >"+document.getElementById("prd_dtype1").innerHTML+"</select>";
col6.innerHTML = "<input type=\"text\" name=\"prddamount[]\" id=\"prd_damount"+newlineno+"\" onKeyUp=\"calprice2(this.value,'"+newlineno+"');\" />";
col7.innerHTML = "<input readonly=\"readonly\" name=\"prdprice[]\" id=\"prd_price"+newlineno+"\" value=\"0\" />";
var table = document.getElementById("tableToModify"); // find table to append to
table.appendChild(row); // append row to table
}
现在到目前为止一切都很好。现在,当我尝试在第一列中插入一个产品名称并且正在从数据库中填充值时,它应该显示计算。对于计算,我已经完成了 js 之类的
function calprice1(q,line) {
var cost=document.getElementById("prd_cost"+line).value;
var damount=document.getElementById("prd_damount"+line).value;
document.getElementById("prd_price"+line).value=parseFloat((cost*q)*(100-damount)/100).toFixed(2);
totalprice();
}
现在对于将添加单个价格的所有价格的底部总价格,我正在使用总价格功能。功能是这样的。
function totalprice(){
var sum=0;
var price = document.forms[0].elements["prdprice[]"];
console.log(price);
for(var i=0, n=price.length;i<n;i++) {
sum+=parseFloat(price[i].value);
}
document.getElementById("total").innerHTML=parseFloat(sum).toFixed(2);
}
现在这里没有显示所有计算后第一行的值,totalprice
但是当我通过 addrow 按钮添加另一行时,它显示了totalprice
正确的数量(所有行的值都被添加)。所以有人可以告诉我这里有什么问题。任何帮助和建议都是非常值得赞赏的。谢谢。