通过循环javascript将表输入到输出

Question

我正在尝试创建一个简单的函数，让用户在表格中输入一些输入(只有数字)。输入将被重新计算，并在下面的表行中返回一个新的数字。(每一行都会有不同的计算，但如果我能得到一些帮助来解决第一个问题，我应该能够自己完成其余的工作。)

下面的代码适用于第一行，但感觉不必要的繁琐。我认为我应该能够遍历这些值来获得输出，而不是手动执行。我不能得到它，这真的很困扰我：

我希望在这方面使用香草js。谢谢!

HTML：

<!-- FORM 4-->
        <form id="F3" class="form">
          <table>
            <caption>
              <strong>Header</strong>
            </caption>
            <!-- Row-1 Table-4 -->
            <tbody id="tb3">
              <tr class="row1">
                <th scope="row">Price 1</th>
                <td>
                  <input type="number" id="r6c0" value="0" />
                </td>
                <td>
                  <input type="number" id="r6c1" value="0" />
                </td>
                <td>
                  <input type="number" id="r6c2" value="0" />
                </td>
                <td>
                  <input type="number" id="r6c3" value="0" />
                </td>
                <td>
                  <output class="any1"></output>
                </td>
              </tr>
              <!-- Row-2 Table-4 -->
              <tr class="output1">
                <th scope="row">Price 2</th>
                <td>
                  <output id="r7c0" class="any">7</output>
                </td>
                <td>
                  <output id="r7c1" class="any">6</output>
                </td>
                <td>
                  <output id="r7c2" class="any">5</output>
                </td>
                <td>
                  <output id="r7c3" class="any">4</output>
                </td>
                <td>
                  <output class="any1"></output>
                </td>
              </tr>
              <!-- Row-3 Table-4 -->
              <tr>
                <th scope="row">Diff Prices (%)</th>
                <td>
                  <output id="r8c0">8</output>
                </td>
                <td>
                  <output id="r8c1">0</output>
                </td>
                <td>
                  <output id="r8c2">0</output>
                </td>
                <td>
                  <output id="r8c3">0</output>
                </td>
                <td>
                  <output></output>
                </td>
              </tr>
              <!-- Row-4 Table-4 -->
              <tr>
                <th scope="row">Win</th>
                <td>
                  <output id="r9c0">9</output>
                </td>
                <td>
                  <output id="r9c1">0</output>
                </td>
                <td>
                  <output id="r9c2">0</output>
                </td>
                <td>
                  <output id="r9c3">0</output>
                </td>
                <td>
                  <output class="sum"></output>
                </td>
              </tr>
              <!-- Row-5 Table-4-->
              <tr>
                <th scope="row">Loss</th>
                <td>
                  <output id="r10c0">10</output>
                </td>
                <td>
                  <output id="r10c1">0</output>
                </td>
                <td>
                  <output id="r10c2">0</output>
                </td>
                <td>
                  <output id="r10c3">0</output>
                </td>
                <td>
                  <output class="sum"></output>
                </td>
              </tr>
            </tbody>
          </table>
        </form>

JS：

const form = document.querySelector("#F3");
let f3 = form;
f3.onchange = editInput;

function editInput() {
  const rowInput = document.querySelectorAll(".row1 input");
  const anyRow = document.querySelector("#tb3").getElementsByClassName("any");

  for (k = 0; k < anyRow.length; k++) {
    for (i = 0; i < rowInput.length; i++) {
      anyRow[0].innerHTML = rowInput[0].value - 1;
      anyRow[1].innerHTML = rowInput[1].value - 1;
      anyRow[2].innerHTML = rowInput[2].value - 1;
      anyRow[3].innerHTML = rowInput[3].value - 1;
    }
  }
}

https://jsfiddle.net/battleaxe/0d4f5gvs/3/

Answer 1

您可以将forEach与索引重载一起使用，以获得相同的效果，如下所示：

function editInput() {
  const rowInput = document.querySelectorAll(".row1 input");
  const anyRow = document.querySelector("#tb3").getElementsByClassName("any");
   rowInput.forEach((i,ix)=>{anyRow[ix].innerHTML = i.value -1});
  
}

Fiddle