JavaScript 更新 <tr> 和 <td> 取决于选择输入

Question

我遇到了一个很大的问题，无法接近解决方案。我在 JS 方面不是最好的，并且正在努力学习这门语言，我相信如果不是完整的解决方案，您至少可以给我一些提示。

可以在HERE 找到我想要实现的 CodePen 示例。 及以下：

<input type="search" id="myInput" onSearch="myFunction()" placeholder="scan sku id here">
<p id="mySearch"></p>
<table> 
<th>SKU ID</th>
    <th>QTY</th>
  <tBody>
    <tr>
      <td>SKU1</td>
      <td id="totalSKU">6</td>
    </tr>
    <tr>
      <td>SKU2</td>
      <td id="totalSKU">8</td>
    </tr>
  </tBody>
</table>
<br/>
<p>TOTAL:<p>
<p id="myVar">0</p>

<script>
  var x = document.getElementById("myInput");
  var y = document.getElementById('totalSKU').innerText;
  var z = 0;

function myFunction() {
  document.getElementById("mySearch").innerHTML = x.value;
    if(y>0)
    {
      document.getElementById('totalSKU').innerText = --y;
      document.getElementById('myVar').innerText = ++z;
    }
  else
    alert("Cannot Proceed!");
}
</script>

总的来说，我正在寻找一种解决方案，该解决方案可以让我在不影响数据库的情况下操作呈现给用户的屏幕上的数据。

我的报告将仅显示几行带有 sku_id、描述和数量的数据。

将要求用户输入两个输入。 Box id，它将显示此框中包含的所有 SKU - 没问题。之后会要求用户将 SKU id 扫描到 sku 字段中。

现在我遇到的问题是：

1. 修改/减去数量，其中 sku_id = 用户输入的 sku_id
2. 更新 qty = 0 的整行背景
3. 应显示扫描的项目总数，但不允许过度扫描。

希望我已经足够清楚了，但如果您还有其他问题，请随时提出，我很乐意为您提供帮助。

非常感谢。

Answer 1

我注意到您需要在计算中使用parseInt() 的第一件事。当你得到一个节点的 innerText 时，它会以字符串的形式返回，那么你需要在对其进行任何类型的数学运算之前解析它（比如递减它）。

接下来，您有 2 个相同的 ID (totalSKU)，ID 应该是唯一的。所以我将它们更新为最后有 1 和 2。当搜索通过时，它会将搜索附加到 ID 以获取正确的 ID。您应该围绕此添加更多检查（例如，如果搜索不是有效数字）。

我也更新了一些 var 名称，以便在下面的示例中更加清晰。在示例中，您可以在搜索中输入1 或2，它将减少正确的 SKU。

var searchInput = document.getElementById("myInput");

function myFunction() {
  var totalVar = document.getElementById('myVar');
  var searchValue = parseInt(searchInput.value);
  var totalSKU = document.getElementById(`totalSKU${searchValue}`);
  
  if(totalSKU === null){
    alert("no SKU found");
    return;
  }
  
  var totalSKUNumber = parseInt(totalSKU.innerText);

  document.getElementById("mySearch").innerText = searchValue;

  if (totalSKUNumber > 0) {
    totalSKU.innerText = --totalSKUNumber;
    totalVar.innerText = parseInt(totalVar.innerText) - 1;
  } else {
    alert("Cannot Proceed!");
  }
}

<input type="search" id="myInput" onSearch="myFunction()" placeholder="scan sku id here">
<p id="mySearch"></p>
<table>
  <th>SKU ID</th>
  <th>QTY</th>
  <tBody>
    <tr>
      <td>SKU1</td>
      <td id="totalSKU1">6</td>
    </tr>
    <tr>
      <td>SKU2</td>
      <td id="totalSKU2">15</td>
    </tr>
  </tBody>
</table>
<br/>
<p>TOTAL:
  <p>
    <p id="myVar">21</p>