[英]Javascript strange error when I am doing adding the values of row?
I have a strange error in my JavaScript code. 我的JavaScript代码有一个奇怪的错误。 My markup is something like this
我的标记是这样的
<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-->
Now under that I have a button called add a new line. 现在,在该按钮下有一个名为添加新行的按钮。 The markup is like this
标记是这样的
<input type="button" style="float:left;" onClick="createRow();" class="add-line" value="Add a new line">
For that I have made my java script like this 为此,我做了这样的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
}
Now upto this point everything is fine. 现在到此为止一切都很好。 Now when I am trying to insert one product name in 1st column and the values are being populated from the database then it should show calculation.
现在,当我尝试在第一列中插入一个产品名称并且正在从数据库中填充值时,它应该显示计算结果。 For the cacculation I have done js like
对于接种,我已经完成了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();
}
Now for the bottom total price where all the price for individual price will be added I am using total price function. 现在,对于将要添加各个价格的所有价格的最低总价格,我正在使用总价格函数。 The function is something like this.
该功能是这样的。
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);
}
Now here the value for first row after all the calculation is not showing in totalprice
but when I am adding another line by addrow button it is showing the totalprice
with correct amount(all the values for rows are getting added). 现在这里所有计算之后的第一行的值未显示在
totalprice
但是当我通过addrow按钮添加另一行时,它显示的totalprice
具有正确金额的totalprice
(所有行的值都已添加)。 So can someone kindly tell me what is the issue here. 所以有人可以告诉我这里是什么问题。 Any help and suggestions are highly appreciable.
任何帮助和建议都是非常可取的。 Thanks.
谢谢。
Now here the value for first row after all the calculation is not showing in totalprice but when I am adding another line by addrow button it is showing the totalprice with correct amount(all the values for rows are getting added).
现在这里所有计算之后的第一行的值未显示在totalprice中,但是当我通过addrow按钮添加另一行时,它显示的是具有正确金额的totalprice(所有行的值都已添加)。
So in the beginning, you have only one row, and therefor only one single form element with the name prdprice[]
, correct? 因此,在一开始,您只有一行,因此只有一个名称为
prdprice[]
单个表单元素,对吗?
Well, that's the problem right there: document.forms[0].elements["prdprice[]"]
only returns a NodeList if there's more than one element with that name – otherwise, it will return the reference to that single DOM node directly. 好吧,这就是问题所在:
document.forms[0].elements["prdprice[]"]
仅在有多个具有该名称的元素时才返回NodeList –否则,它将直接返回对该单个DOM节点的引用。
So, when you get the reference to a single DOM node, it has no length
property, and by trying to read it, you will only get undefined
. 因此,当您获得对单个DOM节点的引用时,它没有
length
属性,并且通过尝试读取它,只会得到undefined
。
And since 0 < undefined
evaluates to false, your for-loop is not iterated over a single time … 并且由于
0 < undefined
计算结果为false,因此您的for循环不会在单个时间里迭代…
An easy way to work around this is the following: 解决此问题的简单方法如下:
var price = document.forms[0].elements["prdprice[]"];
if(price.length === undefined) { price = [price]; }
If price is not a NodeList, but a reference to a single DOM node – then we make it an array instead, that contains the reference to that single DOM node as its only element. 如果price不是NodeList,而是对单个DOM节点的引用–那么我们将其改为一个数组,其中包含对该单个DOM节点的引用作为其唯一元素。
After that, price
has a length
in any case, so you can loop over it with your for-loop in the same way as if it was a NodeList. 在那之后,
price
无论如何都是有length
,因此您可以使用for循环将其循环,就像它是NodeList一样。
There is a cave-at though: Since we are creating an array here, it behaves differently than a NodeList. 但是有一个警告:由于我们在这里创建数组,因此它的行为与NodeList不同。 NodeLists are “live”, that means any change in the DOM is reflected by them immediately – whereas our array is static.
NodeList是“活动的”,这意味着DOM中的任何更改都会立即反映出来-而我们的数组是静态的。 But as long as you are not adding/removing nodes to your DOM (nodes that this NodeList would “capture”, so only elements of that form with the name
prdprice[]
), but are just looping over the previously existing ones, this does not matter. 但是只要您不向DOM中添加/删除节点(此NodeList将“捕获”的节点,所以仅该形式的名称为
prdprice[]
元素),而是循环遍历先前存在的元素,就可以没关系。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.