使用Javascript自動更新/計算HTML表格中的行值

Question

所以我很確定我在這裏錯過了一些非常明顯的東西，但是在過去的許多小時裏，我曾在一個大型項目的許多部分工作過，打破我的頭。

基本上我試圖計算HTML表格中每一行的兩個值。我希望在表格被填寫時自動計算/更新值。

目前既沒有Revenue也沒有Value正在自動/計算，雖然我沒有將onkeyup = "getValues()"添加到HTML代碼。

如果Number Used字段爲空，則應使用Number in Package中的值來計算收入（price * inPackage）。如果不是空白，則應使用該字段中的值（price * numberUsed）。

很確定我需要指定這需要在每個行的某個位置完成，但是對於我的生活還沒有弄清楚。

下面是一個的jsfiddle鏈接（顯示了HTML，但JS不工作）：https://jsfiddle.net/wkts81u9/

這裏是我的HTML代碼：

<table id='worksheet_table' class="table table-striped"> 
     <thead> 
     <tr> 
     <th>Package</th> 
      <th>Number in Package</th> 
      <th>Number Used</th> 
      <th>Price</th> 
      <th>Revenue</th> 
      <th>Value</th> 
     </tr> 
     </thead> 
     <tbody> 
      <tr> 
      <td id="package" name="package">1</td> 
      <td id="inPackage" name="inPackage">50</td> 
      <td><input type="text" name="numberUsed" id="numberUsed" class="form-control" onkeyup="getValues()" /></td> 
      <td><input type="text" name="price" id="price" class="form-control" onkeyup="getValues()" /></td> 
      <td name="revenue" id="revenue"></td> 
      <td name="value" id="value"></td> 
      </tr> 
      <tr> 
      <td id="package" name="package">2</td> 
      <td id="inPackage" name="inPackage">100</td> 
      <td><input type="text" name="numberUsed" id="numberUsed" class="form-control" onkeyup="getValues()" /></td> 
      <td><input type="text" name="price" id="price" class="form-control" onkeyup="getValues()" /></td> 
      <td name="revenue" id="revenue"></td> 
      <td name="value" id="value"></td> 
      </tr> 
     </tbody> 
     </table> 

這裏是我的JS：

function getValues() 
    { 
     var numberUsed = Number(document.getElementById('numberUsed').value); 
     var price = Number(document.getElementById('price').value); 
     var inPackage = Number(document.getElementById('inPackage').value); 
     var revenue = 0; 
    if (numberUsed=="") 
    { 
     revenue = price * inPackage; 
    } 
    else 
    { 
     revenue = price * numberUsed; 
    } 
    var value = revenue * 5; 
    document.getElementById("revenue").innerHTML = revenue; 
    document.getElementById("value").innerHTML = value; 
    } 

（對不起，我的代碼中的任何亂碼格式）

任何人都可以告訴我在這裏錯過了什麼？

Answer 1

我看到需要指出你的代碼有很多問題。我在JsBin *上創建了一個工作示例以幫助您：http://jsbin.com/gevocahihu/edit?html,output

• 第一個問題，您多次使用項目標識。您無法在HTML文件中執行此操作
• 您正在訪問帶有錯誤屬性的inPackage。您需要訪問其innerHTML屬性，而不是值，因爲這不是<input>。

注：我在示例中拿出了一行來簡化事情。你可以通過在你的函數中添加構造函數來擴展它，以指定你要編輯的行，例如：function getValues(row)

我有很多麻煩讓這個應用程序在JSFiddle中工作，這可能是一個大在網站中，現在就使用JsBin。

Answer 2

您有2個元素具有相同的ID：numberUsed。 「該ID在全球範圍屬性定義的唯一標識（ID）必須是在整個文檔中是獨一無二的。」檢查這個Link

而且同樣具有：價格，稅收等

爲了計算簡單更改ID上課並使用每個循環。如果你使用jQuery將是這樣的：

var total=0; 
$(".numberUsed").each(function() { 
    var $this = $(this); 
    total += $this.val(); 
} 

如果使用香草將是這樣的：

var number = document.querySelectorAll(".numberUsed"), total=0; 
for(var i=0; i< number.length; i++) { 
    number += number[i].value; 
} 

Answer 3

我能看到的問題與您的代碼。您確實有兩個輸入元素具有相同的ID，並且只有在執行getValues方法時才考慮這些元素。

以下是與getElementById相關的thread link。

更好的選擇是使用querySelector和querySelectorall。

我修改了一下你的代碼，使它工作。

HTML：

<table id='worksheet_table' class="table table-striped"> 
    <thead> 
    <tr> 
     <th>Package</th> 
     <th>Number in Package</th> 
     <th>Number Used</th> 
     <th>Price</th> 
     <th>Revenue</th> 
     <th>Value</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr class="package-row"> 
     <td id="package" name="package">1</td> 
     <td id="inPackage" name="inPackage">50</td> 
     <td><input type="text" name="numberUsed" id="numberUsed" class="form-control" onkeyup="getValues()"/></td> 
     <td><input type="text" name="price" id="price" class="form-control" onkeyup="getValues()"/></td> 
     <td name="revenue" id="revenue"></td> 
     <td name="value" id="value"></td> 
    </tr> 
    <tr class="package-row"> 
     <td id="package" name="package">2</td> 
     <td id="inPackage" name="inPackage">100</td> 
     <td><input type="text" name="numberUsed" id="numberUsed" class="form-control" onkeyup="getValues()"/></td> 
     <td><input type="text" name="price" id="price" class="form-control" onkeyup="getValues()"/></td> 
     <td name="revenue" id="revenue"></td> 
     <td name="value" id="value"></td> 
    </tr> 
    </tbody> 
</table> 

JS：

function getValues() { 
      var rows = document.querySelectorAll("tr.package-row"); 
      rows.forEach(function (currentRow) { 

       var numberUsed = Number(currentRow.querySelector('#numberUsed').value); 
       var price = Number(currentRow.querySelector('#price').value); 
       var inPackage = Number(currentRow.querySelector('#inPackage').value); 
       var revenue = 0; 

       document.querySelectorAll('numberUsed'); 

       if (numberUsed == "") { 
        if (isNaN(inPackage) || isNaN(price)) { 
         return; 
        } 
        revenue = price * inPackage; 
       } 
       else { 
        if (isNaN(numberUsed) || isNaN(price)) { 
         return; 
        } 
        revenue = price * numberUsed; 
       } 
       var value = revenue * 5; 
       currentRow.querySelector("#revenue").innerHTML = revenue; 
       currentRow.querySelector("#value").innerHTML = value; 
      }); 

     } 

這裏是鏈接：Working Solution