我在添加行的值時出現Javascript奇怪的錯誤？

Question

我的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具有正確金額的totalprice （所有行的值都已添加）。 所以有人可以告訴我這里是什么問題。 任何幫助和建議都是非常可取的。 謝謝。

Answer 1

現在這里所有計算之后的第一行的值未顯示在totalprice中，但是當我通過addrow按鈕添加另一行時，它顯示的是具有正確金額的totalprice（所有行的值都已添加）。

因此，在一開始，您只有一行，因此只有一個名稱為prdprice[]單個表單元素，對嗎？

好吧，這就是問題所在： document.forms[0].elements["prdprice[]"] 僅在有多個具有該名稱的元素時才返回NodeList –否則，它將直接返回對該單個DOM節點的引用。

因此，當您獲得對單個DOM節點的引用時，它沒有length屬性，並且通過嘗試讀取它，只會得到undefined 。

並且由於0 < undefined計算結果為false，因此您的for循環不會在單個時間里迭代…

---

解決此問題的簡單方法如下：

var price = document.forms[0].elements["prdprice[]"];
if(price.length === undefined) { price = [price]; }

如果price不是NodeList，而是對單個DOM節點的引用–那么我們將其改為一個數組，其中包含對該單個DOM節點的引用作為其唯一元素。

在那之后， price無論如何都是有length ，因此您可以使用for循環將其循環，就像它是NodeList一樣。

但是有一個警告：由於我們在這里創建數組，因此它的行為與NodeList不同。 NodeList是“活動的”，這意味着DOM中的任何更改都會立即反映出來-而我們的數組是靜態的。 但是只要您不向DOM中添加/刪除節點（此NodeList將“捕獲”的節點，所以僅該形式的名稱為prdprice[]元素），而是循環遍歷先前存在的元素，就可以沒關系。