table 通过循环输入到输出 javascript

Question

我正在尝试制作一个简单的功能，让用户在 table 中输入一些输入（仅数字）。将重新计算输入，并在下面的 table 行中 return 一个新数字。（每一行都会有不同的计算，但如果我能得到一些帮助来计算第一个，我应该可以自己完成剩下的。）

下面的代码适用于第一行，但感觉不必要的麻烦。我想我应该能够遍历值来获取输出，而不是手动执行。我真的很烦恼我无法得到它:(

我希望为此使用 vanilla 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

table 通过循环输入到输出 javascript

table input to output via loop javascript

javascript

iteration

for-loop

html-table

calculation