Question

所以我很确定我在这里错过了一些非常明显的事情，但是过去几个小时在一个大项目的许多部分工作过，这让我大打折扣。

基本上我试图为HTML表格中的每一行计算两个值。我希望值在表格填写时自动计算/更新。

目前，Revenue和Value都未进行自动更新/计算，但我确实在HTML代码中添加了onkeyup = "getValues()"。

如果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

首先，您多次使用商品ID。您无法在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();
}

如果使用Vanilla会是这样的：

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

Answer 3

我可以看到您的代码存在问题。你有2个具有相同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

使用Javascript自动更新/计算HTML表格中行的值

3 个答案: