创建一个for循环来计算特定的单元格，然后将结果写入行中的最后一个单元格

Question

我是JS的新手，我正在尝试学习for循环，在这种情况下，如果可能的话，我想把它变成一个for循环。我想要计算单元格3中的静态数字字符串，乘以单元格4中的输入数字，然后将结果输出到循环中创建的新单元格5。任何帮助都是非常感谢的。

var table = document.getElementById("table");

var Row1 = table.rows[1],
    cell1 = Row1.insertCell(5);
var Row2 = table.rows[2],
    cell2 = Row2.insertCell(5);
var Row3 = table.rows[3],
    cell3 = Row3.insertCell(5);
var Row4 = table.rows[4],
    cell4 = Row4.insertCell(5);
var Row5 = table.rows[5],
    cell5 = Row5.insertCell(5);
var Row6 = table.rows[6],
    cell6 = Row6.insertCell(5);

var x1 = table.rows[1].cells[4].getElementsByTagName('input')[0].value;
var y1 = table.rows[1].cells[3].innerHTML;
    cell1.innerHTML = y1 * x1;
var x2 = table.rows[2].cells[4].getElementsByTagName('input')[0].value;
var y2 = table.rows[2].cells[3].innerHTML;
    cell2.innerHTML = y2 * x2;
var x3 = table.rows[3].cells[4].getElementsByTagName('input')[0].value;
var y3 = table.rows[3].cells[3].innerHTML;
    cell3.innerHTML = y3 * x3;
var x4 = table.rows[4].cells[4].getElementsByTagName('input')[0].value;
var y4 = table.rows[4].cells[3].innerHTML;
    cell4.innerHTML = y4 * x4;
var x5 = table.rows[5].cells[4].getElementsByTagName('input')[0].value;
var y5 = table.rows[5].cells[3].innerHTML;
    cell5.innerHTML = y5 * x5;
var x6 = table.rows[6].cells[4].getElementsByTagName('input')[0].value;
var y6 = table.rows[6].cells[3].innerHTML;
    cell6.innerHTML = y6 * x6;

Answer 1

您可以使用如下所示的for循环。看起来您正在对数字进行操作，所以我在x1和y1的赋值前面添加了一个+，以隐式地将它们类型转换为numbers。

for(var i = 1; i <= 6; i++) {
  var firstRow = table.rows[i], cell = firstRow.insertCell(5);
  var x1 = +table.rows[i].cells[4].getElementsByTagName('input')[0].value;
  var y1 = +table.rows[i].cells[3].innerHTML;
  cell.innerHTML = y1 * x1;
}

Answer 2

它们不需要在函数中，只是为了使其更容易阅读

function createCells() {
  cells = []
  for (let i = 1; i < 7; i++) {
    var cells[i] = table.rows[i].insertCell(5)
  }
}

function calculate() {
  for
  let (i = 1; i < 7; i++) {
    var x = table.rows[i].cells[4].getElementsByTagName('input')[0].value;
    var y = table.rows[i].cells[3].innerHTML;
    cells[i].innerHTML = (y * x);
  }
}

Answer 3

使用简单的for循环的简短答案是：

1. 循环遍历每行
2. 每行，将数量与价格相乘
3. 输出合计在同一行中

因为我们基本上总是希望在每一行中都有一个“总”-field，所以我们可以直接将它添加到HTML中。

由于我们知道price-元素和quantity-元素的位置，因此我们可以使用固定值作为索引来访问它们。

​

var rows = document.querySelectorAll("#pricetable tbody tr");
for (var i = 0; i < rows.length; ++i) {
  var price = rows[i].children[3].innerHTML;
  var quantity = rows[i].children[4].children[0].value;
  var total = price * quantity; // Implicit type-casting to numbers
  rows[i].children[5].innerHTML = total;
}

<table id="pricetable">
  <thead>
    <tr>
      <th>Number</th>
      <th>Product</th>
      <th>Brand</th>
      <th>Price</th>
      <th>Quantity</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>23456789</td>
      <td>Phone</td>
      <td>Apple</td>
      <td>6500</td>
      <td>
        <input type="text" size="3" value="1" />
      </td>
      <td></td>
    </tr>
    <tr>
      <td>22256289</td>
      <td>Phone</td>
      <td>Samsung</td>
      <td>6200</td>
      <td>
        <input type="text" size="3" value="1" />
      </td>
      <td></td>
    </tr>
    <tr>
      <td>24444343</td>
      <td>Phone</td>
      <td>Huawei</td>
      <td>4200</td>
      <td>
        <input type="text" size="3" value="1" />
      </td>
      <td></td>
    </tr>
    <tr>
      <td>19856639</td>
      <td>Tablet</td>
      <td>Apple</td>
      <td>4000</td>
      <td>
        <input type="text" size="3" value="1" />
      </td>
      <td></td>
    </tr>
    <tr>
      <td>39856639</td>
      <td>Tablet</td>
      <td>Samsung</td>
      <td>2800</td>
      <td>
        <input type="text" size="3" value="1" />
      </td>
      <td></td>
    </tr>
    <tr>
      <td>12349862</td>
      <td>Tablet</td>
      <td>Huawei</td>
      <td>3500</td>
      <td>
        <input type="text" size="3" value="1" />
      </td>
      <td></td>
    </tr>
  </tbody>
</table>

​

注意：当更改这些元素的位置时(例如，通过在它们前面添加一个新列)，它们的索引将会移动。这将使您必须手动更新JS-file中的索引。

你可以通过使用这个简单的“技巧”来让这件事变得更容易：

向元素添加特定的类(例如.price、.quantity、.total)，使您可以使用Element.querySelector()轻松找到它们。

注意：脚本只运行一次，也就是第一次加载页面时。这意味着，输入不同的数量不会更新“总”-field。为此，我们需要一个EventListener。

另一种方法

通过观察for循环，我们可以看到：

每个iteration

• The顺序我们只访问一行我们访问的每一行都是不相关的

由于这两个点都已选中，因此我们可以使用-loop (也称为foreach-loop或增强的for-loop)。一个for...of-loop (在我看来)更容易阅读，它告诉我们使用上面的列表自己检查了什么。

注意：要小心difference of the for...of-loop and the for...in-loop。

现在，我们可以在循环中当场计算总和，但考虑到未来，我们希望在输入新的量值时再次执行相同的计算。我们可以通过使计算成为Function updateRowTotal()来减少重复的代码，使代码更容易调试和理解。

要在输入新的数量值时实际更新总数，我们可以使用一个EventListener，当在<input>-field中输入一个新值时，它会自动调用一个函数(通过调用updateRowTotal(evt.target.closest("tr")))。

​

function clamp(min, value, max) {
  return Math.max(min, Math.min(value, max));
}

for (let row of document.querySelectorAll("#pricetable tbody tr")) {
  updateRowTotal(row);
  row.querySelector("input.quantity").addEventListener("input", evt => {
    // Add '/*' before this comment to "remove" this extra part
    // The 5 lines below are to clamp 'value' between 'min' and 'max'
    let min = parseInt(evt.target.getAttribute("min"));
    let max = parseInt(evt.target.getAttribute("max"));
    if (isNaN(min)) min = Number.MIN_SAFE_INTEGER;
    if (isNaN(max)) max = Number.MAX_SAFE_INTEGER;
    evt.target.value = clamp(min, evt.target.value, max);
    // */
    updateRowTotal(evt.target.closest("tr"));
  });
}

function updateRowTotal(row) {
  row.querySelector(".total").innerHTML = row.querySelector(".price").innerHTML * row.querySelector(".quantity").value;
}

<table id="pricetable">
  <thead>
    <tr>
      <th>Price</th>
      <th>Quantity</th>
      <th>Row-Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="price">6500</td>
      <td>
        <input class="quantity" type="number" min="0" max="999" value="1" />
      </td>
      <td class="total"></td>
    </tr>
    <tr>
      <td class="price">6200</td>
      <td>
        <input class="quantity" type="number" min="0" max="999" value="1" />
      </td>
      <td class="total"></td>
    </tr>
    <tr>
      <td class="price">4200</td>
      <td>
        <input class="quantity" type="number" min="0" max="999" value="1" />
      </td>
      <td class="total"></td>
    </tr>
    <tr>
      <td class="price">4000</td>
      <td>
        <input class="quantity" type="number" min="0" max="999" value="1" />
      </td>
      <td class="total"></td>
    </tr>
    <tr>
      <td class="price">2800</td>
      <td>
        <input class="quantity" type="number" min="0" max="999" value="1" />
      </td>
      <td class="total"></td>
    </tr>
    <tr>
      <td class="price">3500</td>
      <td>
        <input class="quantity" type="number" min="0" max="999" value="1" />
      </td>
      <td class="total"></td>
    </tr>
  </tbody>
</table>

​

Sidenote

将<input>-field设置为type="number"可防止输入任何非数字字符。

由于min和max-attributes只阻止表单提交，因此我们必须自己编写值夹持代码。通过读取属性的值并将值限制在它们定义的范围内，可以很容易地做到这一点。请注意，我们已经为min和max添加了默认值，它们是最低和最高的safe integer-value。